You don't have to manipulate the stylesheet. And given the differences across
browsers attempting to do so, I strongly urge you to make use of "className"
instead:
<style type="text/css">
/*
IE 5.5 does not actually support "table-row-group"
only "table-header-group" and "table-footer-group"
but I've found the following CSS renders correctly
*/
tbody.on { display:table-row-group; }
tbody.off { display:none; }
</style>
<script type="text/javascript">
function toggleTbody(id) {
if (document.getElementById) {
var tbod = document.getElementById(id);
if (tbod && typeof tbod.className == 'string') {
if (tbod.className == 'off') {
tbod.className = 'on';
} else {
tbod.className = 'off';
}
}
}
return false;
}
</script>
<a href="#" onclick="return toggleTbody('two');">Toggle tbody two</a>
<table>
<tbody id="one">
<tr>
<td>One</td><td>One</td><td>One</td>
</tr>
<tr>
<td>One</td><td>One</td><td>One</td>
</tr>
<tr>
<td>One</td><td>One</td><td>One</td>
</tr>
</tbody>
<tbody id="two">
<tr>
<td>Two</td><td>Two</td><td>Two</td>
</tr>
<tr>
<td>Two</td><td>Two</td><td>Two</td>
</tr>
<tr>
<td>Two</td><td>Two</td><td>Two</td>
</tr>
</tbody>
<tbody id="three">
<tr>
<td>Three</td><td>Three</td><td>Three</td>
</tr>
<tr>
<td>Three</td><td>Three</td><td>Three</td>
</tr>
<tr>
<td>Three</td><td>Three</td><td>Three</td>
</tr>
</tbody>
</table>
Note that there is no initial CSS class assigned to the tbody elements. As a
result, my condition *must* be written testing className against the string "off".
If the test were against "on", you'd miss the fact that the tbody elements are
already "on", even though className is "".
There are other ways of doing this, but they are mostly all variations on this
basic theme.
Carl Smotricz wrote:
Unfortunately, I don't know how to do this - manipulate the stylesheet,
that is :)
Wang, Jay wrote: I try to group several rows in a table into a div and show/hide them by
click on a button somewhere with a javascript link. When clicked, the link
will toggle the style of the div section's style between BLOCK and NONE.
This technique works on normal text fine, but it doesn't work on part of the
table, is there a solution that I can achieve the goal of turning on/off
several rows all together? Thanks.
--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ -
http://jibbering.com/faq 
