如何使用 JavaScript（无 jQuery）显示/隐藏隐藏的 HTML 表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30901174/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show/hide hidden HTML table rows using JavaScript (no jQuery)
提问by Robert
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.
我想要一个 HTML 表，其中每行之间都有隐藏的行，其中包含有关顶级行的更多信息。单击第一列中的展开/折叠图像链接时，隐藏行的可见性将从 display:none 切换；显示：表格行；。我已经有一段时间没有编写 JavaScript 了，需要能够在 JavaScript 中严格执行此操作，并且不能使用 jQuery toggle() 方法。
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?
如何使用 JavaScript 来查找该按钮位于表中的 class="parentRow" 的 class="subRow" 的兄弟，然后切换该兄弟行的可见性？
HTML
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
CSS
.offscreen {
position: absolute;
left: -1000px;
top: 0px;
overflow:hidden;
width:0;
}
.subRow {
background-color: #CFCFCF;
}
JavaScript
JavaScript
function toggleRow() {
var rows = document.getElementsByClassName("parentRow").nextSibling;
rows.style.display = rows.style.display == "none" ? "table-row" : "none";
}
回答by gurch101
Pass your event handler a reference to the row that is clicked using this:
向您的事件处理程序传递对使用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:
然后更新您的 toggleRow 函数，如下所示：
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).
您可能需要考虑创建一个通用函数来向上导航 DOM 树（以便在/如果您更改 HTML 时该函数不会中断）。
回答by Hamid Parchami
Use id attribute to get elements instead of class and give any row an unique number in it's id to make them different.
使用 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">
回答by Samuel Cook
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";
}
