...

View Full Version : how to do a toggle in Table?



NinjaTurtle
08-07-2002, 10:31 AM
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.

beetle
08-07-2002, 02:52 PM
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)

brothercake
08-07-2002, 03:47 PM
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";

NinjaTurtle
08-08-2002, 02:13 AM
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>

beetle
08-08-2002, 03:44 AM
why not let the toggle function do all your work?
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>

NinjaTurtle
08-08-2002, 05:03 AM
yeah!!tq

NinjaTurtle
09-26-2005, 08:14 AM
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:

<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:

<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:

<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 -->



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum