about controlling the visibility of table row
I would like to make certain rows of table invisible when the page is first loaded. The user can display the rows by clicking on a button. The button will then call the functions.
i have set id on the rows like <tr id="secondSH">, but i got two problems.
First, the row will not be invisible when the page is first loaded
Second, when click the button, nth is done.
Here is my code which has been put put in the head section
Code:
document.getElementById('secondSH').style.display = "none";
function enableSecondShareHolder() {
var SHRows = document.all.tags("TR");
for ( i = 0; i < SHRows.length; i++ ) {
if ( SHRows[i].ID == "secondSH" ) {
SHRows[i].style.display = "inline";
}
}
}
Thank you very much for your help.
Re: about controlling the visibility of table row
An HTML document is executed as it is loaded. This means that when your script is executed in the <head> elment, there is no table - there isn't even a <body> element (although some browsers automatically generate the body element before load.)
You can hide the row in the onload event, but this may look odd if there are images or other elements that take longer to load (onload is run once everything is finished loading.) You can also put a <script> tag under the table in question which runs your above code. Finally, you can give the row a default style to not be visible using CSS.
Also, instead of using document.all.tags("TR"), the more widely supported DOM function document.getElementsByTagName("TR") should be used. But I don't see why you use it at all, because this would suffice for your function:
Code:
function enableSecondShareHolder() {
// Note: The default style of a table row is table-row, not inline.
document.getElementById("secondSH").style.display = "table-row";
}
Re: about controlling the visibility of table row
Thank you for your advices.
now i made something like
Code:
<head>
<script type="text/javascript">
function disableSecondShareHolder() {
document.getElementById('secondSH').style.display = "none";
}
function disableThirdShareHolder() {
document.getElementById('thirdSH').style.display = "none";
}
function enableSecondShareHolder() {
document.getElementById('secondSH').style.display = "table-row";
}
function enableThirdShareHolder() {
document.getElementById('thirdSH').style.display = "table-row";
}
</script>
</head>
and at the end of the form, i added
Code:
<script type="text/javascript">
disableSecondShareHolder();
disableThirdShareHolder();
</script>
but it still cannot perform what i want, would you please give me some more advices?
Thank you.
Re: about controlling the visibility of table row
This is mostly what Andreas was talking about...
Code:
<script type="text/javascript">
function changeSecond() {
var theSecond = document.getElementById('secondSH');
if(theSecond.style.display == 'none'){theSecond.style.display = 'table-row';}
else{theSecond.style.display = 'none';}
}
function changeThird() {
var theThird = document.getElementById('thirdSH');
if(theThird.style.display == 'none'){theThirdstyle.display = 'table-row';}
else{theThird.style.display = 'none';}
}
</script>
<table>
<tr>...</tr>
<tr id="secondSH" style="display: none">...</tr>
<tr id="thirdSH" style="display: none">...</tr>
</table>
Re: about controlling the visibility of table row
I've heard that style.display isn't working in Safari. Is it correct?
Re: about controlling the visibility of table row
I've been using it for years in Safari. And it works in the Windows version as well.
