How to show/hide hidden HTML table rows using JavaScript (no jQuery)

Question

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";
}

gurch101 · Accepted Answer · 2015-06-17 20:13:21Z

11

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

answered Jun 17, 2015 at 20:13

gurch101

2,0641 gold badge18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Over a year ago

I knew I was on the right track but was overlooking something. I was just browsing other SO threads trying to figure out how to get the parent <tr> two levels up in the DOM from the image link and then reference the next sibling. This worked perfectly and I feel dumb. Thanks!

Hamid Parchami · Accepted Answer · 2015-06-17 20:07:06Z

0

Use id attribute to get elements instead of class and give any row an unique number in it's id to make them different.

<tr style="display: none;" class="subRow" id="subRow1">
.
.
.
<tr style="display: none;" class="subRow" id="subRow2">
.
.
<tr style="display: none;" class="subRow" id="subRow3">

answered Jun 17, 2015 at 20:07

Hamid Parchami

7,7392 gold badges21 silver badges22 bronze badges

1 Comment

bendecko Over a year ago

Only worked for me in Chrome 66 when there was 1 column in the table

Samuel Cook · Accepted Answer · 2015-06-17 20:19:36Z

0

This worked for me:

function toggleRow() {
    var row = document.getElementsByClassName("parentRow")[0];
    var next = row.parentNode.rows[ row.rowIndex ];
    next.style.display = next.style.display == "none" ? "table-row" : "none";
}

answered Jun 17, 2015 at 20:19

Samuel Cook

16.9k7 gold badges56 silver badges65 bronze badges

Collectives™ on Stack Overflow

How to show/hide hidden HTML table rows using JavaScript (no jQuery)

HTML

CSS

JavaScript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

CSS

JavaScript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related