如何使用 JavaScript（无 jQuery）显示/隐藏隐藏的 HTML 表格行答案

【问题标题】：How to show/hide hidden HTML table rows using JavaScript (no jQuery)如何使用 JavaScript（无 jQuery）显示/隐藏隐藏的 HTML 表格行
【发布时间】：2015-09-03 06:06:35
【问题描述】：

编辑：下面已经回答了。

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

如何使用 JavaScript 找到按钮位于表中的 class="subRow" 和 class="parentRow" 的同级，然后切换该同级行的可见性？

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

【问题讨论】：

标签： javascript html css toggle html-table

【解决方案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 时该函数不会中断）。

【讨论】：

我知道我走在正确的轨道上，但忽略了一些东西。我只是在浏览其他 SO 线程，试图弄清楚如何从图像链接中获取 DOM 中的父两个级别，然后引用下一个兄弟。这工作得很好，我觉得很愚蠢。谢谢！

【解决方案2】：

使用 id 属性而不是类来获取元素，并在其 id 中为任何行赋予唯一编号以使它们不同。

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

【讨论】：

只有在 Chrome 66 中有 1 列时才对我有用

【解决方案3】：

这对我有用：

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

【讨论】：