Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old July 10th, 2003, 05:22 PM
Authorized User
 
Join Date: Jun 2003
Location: Barcelona, , Spain.
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default How to hide a table TR

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
__________________
Tomàs Jiménez
OranginaLab
 
Old July 11th, 2003, 02:16 AM
Authorized User
 
Join Date: Jun 2003
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Try :

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


/Robert
 
Old July 11th, 2003, 03:50 AM
Authorized User
 
Join Date: Jun 2003
Location: Barcelona, , Spain.
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
 
Old July 11th, 2003, 03:57 AM
Authorized User
 
Join Date: Jun 2003
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
 
Old July 11th, 2003, 04:37 AM
Authorized User
 
Join Date: Jun 2003
Location: Barcelona, , Spain.
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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">
<!--
.block {
    display: inline;
}
-->
</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
 
Old July 11th, 2003, 04:40 AM
Authorized User
 
Join Date: Jun 2003
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Great!
I'm just glad that it works!


/Robert
 
Old July 11th, 2003, 06:45 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Why not just say:
Code:
  if (display == "none")
  {
    display = "";
  }
  else
  {
    display = "none";
  }
?

Joe

--

Joe
 
Old July 11th, 2003, 07:04 AM
Authorized User
 
Join Date: Jun 2003
Location: Barcelona, , Spain.
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
 
Old July 28th, 2004, 10:44 PM
Registered User
 
Join Date: Jul 2004
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
 
Old January 24th, 2005, 04:35 AM
Registered User
 
Join Date: Jan 2005
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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







Similar Threads
Thread Thread Starter Forum Replies Last Post
hide certain column in a table lscjtw XSLT 2 August 2nd, 2007 01:26 PM
Code Render Block to hide table rdove84 ASP.NET 1.0 and 1.1 Basics 5 February 16th, 2007 05:57 PM
Hide/show rows in a table smi13y XSLT 6 December 28th, 2006 08:48 PM
Hide or Disable Table To Open vivek_inos Access VBA 2 December 8th, 2005 09:03 AM
Hide table with VBA mmcdonal Access VBA 5 June 24th, 2005 10:13 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.