How to show/hide hidden HTML table rows using JavaScript (no jQuery)
Pass your event handler a reference to the row that is clicked using this
:
<td><a href="#" onclick="toggleRow(this);"><img alt="Expand row" height="20px;" src="expand.png"></a></td>
Then update your toggleRow function as follows:
function toggleRow(e){
var subRow = e.parentNode.parentNode.nextElementSibling;
subRow.style.display = subRow.style.display === 'none' ? 'table-row' : 'none';
}
You may want to consider creating a general-purpose function to navigate up the DOM tree (so that this function won't break when/if you change your HTML).
Robert
Updated on June 18, 2020Comments
-
Robert almost 4 years
Edit: This has been answered below.
I would like to have an HTML table that has hidden rows between each row with more information about the top level rows. When clicking an expand/collapse image link in the first column, the hidden row's visibility will toggle from display:none; to display:table-row;. I have not written JavaScript in a while and need to be able to do this strictly in JavaScript and cannot use the jQuery toggle() method.
How can I use JavaScript to find the sibling with class="subRow" of the with class="parentRow" that the button is located in within the table and then toggle the visibility of that sibling row?
HTML
<table style="width:50%"> <caption>Test Table</caption> <thead> <tr align="center"> <th><span class="offscreen">State Icon</span></th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr align="center" class="parentRow"> <td><a href="#" onclick="toggleRow();"><img alt="Expand row" height="20px;" src="expand.png"></a></td> <td>test cell</td> <td>test cell</td> <td>test cell</td> <td>test cell</td> </tr> <tr style="display: none;" class="subRow"> <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td> </tr> .... </tbody> </table>
CSS
.offscreen { position: absolute; left: -1000px; top: 0px; overflow:hidden; width:0; } .subRow { background-color: #CFCFCF; }
JavaScript
function toggleRow() { var rows = document.getElementsByClassName("parentRow").nextSibling; rows.style.display = rows.style.display == "none" ? "table-row" : "none"; }