Hiding and Display Table Rows Dynamically
Posted: Wednesday, December 05, 2007 1:55:32 PM | 1390 Views
So today I needed to update some existing code and hide a part of a table using JavaScript. The short of it being, that based on another element on the page they wanted to hide a part of the table.
Technically I could have broke the table into two separate tables (I was actually tabular data), but that seemed to create issues with column widths and such matching.
So, if you've ever tried to wrap a div around table row elements your probably well aware, you can't hide and show them. So.. the some what simple solution? Cheat!
<table>
<tr>
<td>
This table row stays!
</td>
</tr>
<tbody id="hiddenid" style="display:none;">
<tr>
<td>
This table row is hidden!
</td>
</tr>
</tbody>
</table>
The only tricky thing to be aware of is when you are setting the TBODY tag back to visible, you need to set it to "table-row-group" for it to properly render the tags. You can set it to "block" and it works in IE, but will not show properly in FireFox. table-row-group fixes the issue in both browsers.
NINJA EDIT! Ok, turns out IE doesn't like "table-row-group", so for IE you must set the TBODY element to nothing.. "" or to "block" in order to render the table rows again.
Yes I know it won't go through validation, but it was quick and painless and the result was far cleaner in the end.
User Comments