Show and Hide certain rows in Table Using Javascript

Question

I am trying to show and hide certain rows of a table, which will display or hide when the using click a link, however, my attempts aren't quite getting there. Can anyone let me know where I'm going wrong?

Firstly, here is some sample html for the table, which is actually generated by php and a sqlsrv connection:

As you can see, javascript is called to hide/show the rows on the second row. This would show all the recipients rows for that file (as well as the child headers). I've only written the showRows JS right now, as I haven't been able to getting working correct, however, the hideRows JS would effectively be the opposite:

function showRows(FileSpan) {
        var rows = document.getElementsByClassName(FileSpan);
        var arr = new Array();

        for (i = 0; i < rows.length; i++) {
            rows[i].style.display = 'block';
        }

    }

This, however, doesn't result in how I want the table to look. Instead of it display the row, it puts all displayed rows in a single cell below the current one. Where am I going wrong?

I've added a few pictures so that you I can see what I want to look like, and how it does.

Answer 1

您只需要将display属性从block更改为table-row 。

rows[i].style.display = 'table-row';