about controlling the visibility of table row

**dummyagain** · September 19th, 2007, 10:55 PM

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.

**andreasblixt** · September 20th, 2007, 01:38 AM

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";
}

**dummyagain** · September 20th, 2007, 02:58 AM

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.

**PeejAvery** · September 20th, 2007, 06:28 AM

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>

**davidc2p** · September 21st, 2007, 08:26 AM

I've heard that style.display isn't working in Safari. Is it correct?

**PeejAvery** · September 21st, 2007, 08:34 AM

I've been using it for years in Safari. And it works in the Windows version as well.

Thread: about controlling the visibility of table row

Thread Tools

Display

about controlling the visibility of table row

Re: about controlling the visibility of table row

Re: about controlling the visibility of table row

Re: about controlling the visibility of table row

Re: about controlling the visibility of table row

Re: about controlling the visibility of table row

Posting Permissions