如何使用JavaScript显示/隐藏隐藏的HTML表行(没有jQuery)

Question

编辑:这已在下面得到解答.

我想有一个HTML表,每行之间有隐藏的行,有关顶级行的更多信息.单击第一列中的展开/折叠图像链接时,隐藏行的可见性将从display:none切换; 显示:table-row;.我有一段时间没有编写JavaScript,需要能够在JavaScript中严格执行此操作,并且不能使用jQuery toggle()方法.

我如何使用JavaScript来查找带有class ="parentRow"的class ="subRow"的兄弟,该按钮位于表中,然后切换该兄弟行的可见性？

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

Answer 1

传递事件处理程序对使用this以下单击的行的引用:

<td><a href="#" onclick="toggleRow(this);"><img alt="Expand row" height="20px;" src="expand.png"></a></td>

然后更新您的toggleRow函数,如下所示:

function toggleRow(e){
    var subRow = e.parentNode.parentNode.nextElementSibling;
    subRow.style.display = subRow.style.display === 'none' ? 'table-row' : 'none';    
}

您可能需要考虑创建一个通用函数来向上导航DOM树(这样,当您/更改HTML时,此函数不会中断).