How to hide a table TR

oranginalab · July 10th, 2003, 05:22 PM

Hi friends,

I need your help!!!
I am a Netscape fan but my beloved browser is causing me a lot of trouble.

What I am trying to do is to show/hide some rows (TR) of my table using the display property.
IE does it correctly but, surprisingly, my favourite browser (NS7.02) presents an odd behaviour. It hides some rows but not those I'm trying to hide.
I've checked the script with different table compositions, with and without <tbody> blocks and I always get an anomalous behaviour. No error is detected but the rows hidden are never those expected to be hidden.

Here you can see the script I am trying to run. It's not so complicate, is it?

<HTML>
<HEAD>
<TITLE>mmmmm!! what a weird behaviour!!</title>
</head>

<script language="JavaScript">

    function toggle(){
        var theTable = (document.getElementById('myTABLE'));
        var theTB = theTable.tBodies.item(0);

        if (theTB.style.display=="")
            theTB.style.display="none";
        else
            theTB.style.display="";
    }
</script>

<BODY>

<table id="myTABLE" border="1" width="100" align="center" cellpadding="0" cellspacing="0">

    <tbody>

        <tr id="TR1">
            <td width="50" id="TD11">1.1</td>
            <td width="50" id="TD12">1.2</td>
        </tr>

        <tr id="TR2">
            <td width="50" id="TD21">2.1</td>
            <td width="50" id="TD22">2.2</td>
        </tr>

    </tbody>

    <tbody>

        <tr id="TR3">
            <td width="50" id="TD31">3.1</td>
            <td width="50" id="TD32">3.2</td>
        </tr>

    </tbody>

</table>
<br><br>
<center><a href="javascript:toggle();">show/hide</a></center>

</body>
</html>

Please, help me solve the mystery. My application must run on both browsers and, besides, I need to check that it's me who is wrong and not my loved Netscape browser.

TomÃ s JimÃ©nez
OranginaLab

robnym · July 11th, 2003, 02:16 AM

Try :

var theTable = (document.getElementById('myTABLE'));
var theTB = theTable.getElementsByTagName("tr")[0];

/Robert

oranginalab · July 11th, 2003, 03:50 AM

Thanks Robert but I've tried that with the same strange results.

I have even tried to pick the TR with document.getElementById("TR2") but NS7 answer is always the same way: in the sample table it always hides the third row. (With more complex tables it does things even stranger)

I think it's not a problem referencing the TR that I want to hide, it seems to be some kind of problem with the display property and the table structure...

Anyway, Robert, thanks again for trying to help me.

TomÃ s JimÃ©nez
OranginaLab

robnym · July 11th, 2003, 03:57 AM

Maybe it has something to do with the display check.

if (theTB.style.display=="")
theTB.style.display="none";
else
theTB.style.display="";

Try alerting theTB.style.display and see what you get back.

/Robert

oranginalab · July 11th, 2003, 04:37 AM

Thank you very much, Robert!!
You gave me the clue of it all!!

The only thing Netscape needs is to have the display property somewhat initialized before attempting to set it.

I have changed the code and now it works fine for both IE6 and NS7 browsers.

I think this little piece of code may be very useful.

Here is the definitive code:

<HTML>
<HEAD>
<TITLE>DOM :: show/hide rows in a table</TITLE>
</HEAD>

<style type="text/css">

</style>

<script language="JavaScript">

    function toggle(){
        var theTable = (document.getElementById('myTABLE'));
        var theTB = theTable.tBodies.item(0);
        var theTR = theTB.rows.item(1);

        if ((theTR.style.display=="")||(theTR.style.display== "inline"))
            theTR.style.display="none";
        else
            theTR.style.display="inline";
    }
</script>

<BODY>

<table id="myTABLE" border="1" width="100" align="center" cellpadding="0" cellspacing="0">

        <tr id="TR1" class="block">
            <td width="50" id="TD11">1.1</td>
            <td width="50" id="TD12">1.2</td>
        </tr>

        <tr id="TR2" class="block">
            <td width="50" id="TD21">2.1</td>
            <td width="50" id="TD22">2.2</td>
        </tr>

        <tr id="TR3" class="block">
            <td width="50" id="TD31">3.1</td>
            <td width="50" id="TD32">3.2</td>
        </tr>

</table>
<br><br>
<center><a href="javascript:toggle();">show/hide</a></center>

</BODY>
</HTML>

and if you want to see it running just click http://www.oranginalab.com/p2p

Thanks a lot, Robert.

TomÃ s JimÃ©nez
OranginaLab

robnym · July 11th, 2003, 04:40 AM

Great!
I'm just glad that it works!

/Robert

joefawcett · July 11th, 2003, 06:45 AM

Why not just say:

Code:

  if (display == "none")
  {
    display = "";
  }
  else
  {
    display = "none";
  }

?

Joe

--

Joe

oranginalab · July 11th, 2003, 07:04 AM

Hi Joe,

I found an strange behaviour in Netscape when setting display property to "".
It hides rows but not those previously selected.
If you test the first code I posted you'll see.
Is an odd thing but it seems to be solved initializing the display property to 'inline' or 'block' values prior to setting it to 'none'.

TomÃ s JimÃ©nez
OranginaLab

sliedig · July 28th, 2004, 10:44 PM

Hi guy's,

this is probably a stupid question but I was hoping you might be able to enlighten me on how I could modify the example above to work with radio buttons. I have a form where people have to answer a lot of yes no questions, some of which require you to add additional information depending on whether the answer is yes or no. To make the form as inutive as possible I wanted to employ this functionality. I'd be grateful if you could provide me with some help.

Thanks, sliedig

rcssaravanan · January 24th, 2005, 04:35 AM

I saw your code, this is useful to be, But, I want to hide more than 1 table using onchange event.

For example

If I select 1 no1 table only will come
If I select 2 no2 table only will come

on the same place

Can you help me.

Regards

Saravanan