Secret to showing/hiding HTML table rows
Today I learned about showing/hiding content on a page. All that is needed is wrap the content in a div tag, and use the following javascript to toggle its display.
document.getElementById('stufftohide').style.display = 'block' <!-- shows it -->
document.getElementById('stufftohide').style.display = 'none' <!-- hides it -->
<div id="stufftohide">
here is my content to show and hide
</div>
document.getElementById('stufftohide').style.display = 'none' <!-- hides it -->
<div id="stufftohide">
here is my content to show and hide
</div>
However, this technique doesn't work when trying to toggle HTML table rows. I did some digging and found a few blogs that explained the secret. Wrap the rows you want to show/hide inside a
tag group, and use "table-row-group" in place of "block" to show the rows. Here is a code snippet that works.<input type="Button" value="Show" onclick="javascript: document.getElementById('stufftohide').style.display = 'table-row-group';">
<input type="Button" value="Hide" onclick="javascript: document.getElementById('stufftohide').style.display = 'none';"><br />
<table border="1">
<tr>
<td>row 1, cell A</td>
<td>row 1, cell B</td>
</tr>
<tbody id="stufftohide">
<tr>
<td>row 2, cell C</td>
<td>row 2, cell D</td>
</tr>
<tr>
<td>row 3, cell E</td>
<td>row 3, cell F</td>
</tr>
</tbody>
</table>
<input type="Button" value="Hide" onclick="javascript: document.getElementById('stufftohide').style.display = 'none';"><br />
<table border="1">
<tr>
<td>row 1, cell A</td>
<td>row 1, cell B</td>
</tr>
<tbody id="stufftohide">
<tr>
<td>row 2, cell C</td>
<td>row 2, cell D</td>
</tr>
<tr>
<td>row 3, cell E</td>
<td>row 3, cell F</td>
</tr>
</tbody>
</table>
Here is a demo of this in action.
There are no comments for this entry.
[Add Comment]