[英]How to show/hide hidden HTML table rows using JavaScript (no jQuery)
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. 我想有一个HTML表,每行之间有隐藏的行,有关顶级行的更多信息。 When clicking an expand/collapse image link in the first column, the hidden row's visibility will toggle from display:none; 单击第一列中的展开/折叠图像链接时,隐藏行的可见性将从display:none切换; to display:table-row;. 显示: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. 我有一段时间没有编写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”的兄弟,该按钮位于表中,然后切换该兄弟行的可见性?
<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>
.offscreen {
position: absolute;
left: -1000px;
top: 0px;
overflow:hidden;
width:0;
}
.subRow {
background-color: #CFCFCF;
}
function toggleRow() {
var rows = document.getElementsByClassName("parentRow").nextSibling;
rows.style.display = rows.style.display == "none" ? "table-row" : "none";
}
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时,此函数不会中断)。
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">
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";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.