Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    358
    Thanks
    2
    Thanked 0 Times in 0 Posts

    how to do a toggle in Table?

    dear,


    i hav above 50 records that need to show in a page, i feel that will make user confusing, what i do is categorised them to few category, and display them in Table format, every tables is with a category title and the records that belong to the particular category, then i can create a "toggle" when user need to see the records of category only they click and expand the records.

    that is an example at microsoft website :
    http://www.microsoft.com/downloads/search.asp?
    - click the [Next] the to expand the rest records...

    but microsoft use the LI to control the toggle, but i want the TR as toggle.
    Thanks.
    =====================================================
    From NinjaTurtle
    ++http://ohmygoh.blogspot.com|http://technology.ohmygoh.com++

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm certain they are just toggling the value of the display CSS property between 'block' and 'none'. This property can pretty much be attached to any DHTML object (including TRs)

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    something like

    <div>
    <table id="upper">
    <tr>
    <td>heading</td>
    </tr>
    </table>
    <table id="lower" style="display:inline">
    <tr>
    <td> ... blah blah blah ...</td>
    </tr>
    </table>
    </div>


    Then you can show hide the bottom table with

    var lowerObj = document.getElementById("lower");
    lowerObj.style.display = "none" | "inline";

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    358
    Thanks
    2
    Thanked 0 Times in 0 Posts
    sorry brothercake,

    sorry... i cant get u.... can u do some sample? what i confuse is the last line of the code :

    var lowerObj = document.getElementById("lower"); lowerObj.style.display
    = "none" | "inline";

    i try to set as Javascript and call as function but still not workable... i only can hide it but cannot display it again...
    my code is :

    <html>
    <head>
    <title>Untitled Document</title>
    </head>

    <body bgcolor="#FFFFFF" text="#000000">
    <div>
    <table id="upper" onclick=toggletable()>
    <tr>
    <td>heading</td>
    </tr>
    </table>
    <table id="lower" style="display:inline">
    <tr>
    <td> ... blah blah blah ...</td>
    </tr>
    </table>
    </div>
    <script language="Javascript">
    function toggletable()
    {
    var lowerObj = document.getElementById("lower");
    lowerObj.style.display = "none";
    }
    </script>
    </body>
    </html>
    Last edited by NinjaTurtle; 08-08-2002 at 02:19 AM.
    Thanks.
    =====================================================
    From NinjaTurtle
    ++http://ohmygoh.blogspot.com|http://technology.ohmygoh.com++

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    why not let the toggle function do all your work?
    Code:
    function toggleDisp(objName)
    	{
    	var tempObj = eval("document.getElementById('"+objName+"');");
    	tempObj.style.display= (tempObj.style.display== 'none') ? 'block' : 'none';
    	}
    	
    <div> 
    	<table id="upper" onclick="toggleDisp('lower');"> 
    		<tr> 
    		<td>heading</td> 
    		</tr> 
    	</table>
    	<table id="lower" style="display:block;"> 
    		<tr> 
    		<td> ... blah blah blah ...</td> 
    		</tr> 
    	</table> 
    </div>

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    358
    Thanks
    2
    Thanked 0 Times in 0 Posts
    yeah!!tq
    Last edited by NinjaTurtle; 08-08-2002 at 05:06 AM.
    Thanks.
    =====================================================
    From NinjaTurtle
    ++http://ohmygoh.blogspot.com|http://technology.ohmygoh.com++

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Posts
    358
    Thanks
    2
    Thanked 0 Times in 0 Posts
    If i apply it to <tr> for toggle, it is not working in firefox or safari. In IE it works great,but in firefox, after 2 or 3 tries it bcom append a new row for each click.


    It is not working:
    Code:
        <table> 
    		<tr id="upper" onclick="toggleDisp('lower');"> 
    		<td>heading</td> 
    		</tr> 
    	</table>
    	<table> 
    		<tr id="lower" style="display:block;">  <-- !!!
    		<td> ... blah blah blah ...</td> 
    		</tr> 
    	</table>
    But it is working if:
    Code:
        <table> 
    		<tr id="upper" onclick="toggleDisp('lower');"> 
    		<td>heading</td> 
    		</tr> 
    	</table>
    	<table id="lower" style="display:block;"> 
    		<tr> 
    		<td> ... blah blah blah ...</td> 
    		</tr> 
    	</table>
    My real code:
    Code:
          <tr id="upper" onclick="toggleDisp('lower')">
            <td><a href="#"><img src="images/link3.jpg" alt="" width="201" height="15" border="0"></a></td>
            <td width="27"></td>
          </tr>
    	  <!-- Hidden section -->
          <tr> 
    	  <td><table width="201" cellpadding="0" cellspacing="0" id="lower" style="display:none;">
    		<tr><td width="201">
    		<a href="A" class="normalText">A</a><BR>
    		<a href="B" class="normalText">B</a><BR>
    		<a href="C" class="normalText">C</a><BR>
    		<a href="D" class="normalText">D</a><BR>
    		</td>
    		</tr>
    		</table>
            <td width="27"></td>
          </tr>
    	  <!-- End of hidden section -->
    Last edited by NinjaTurtle; 09-26-2005 at 08:46 AM.
    Thanks.
    =====================================================
    From NinjaTurtle
    ++http://ohmygoh.blogspot.com|http://technology.ohmygoh.com++


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •