使用 Javascript 切换表 <tr> 的显示：无
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6000305/
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
Toggle a table <tr>'s display:none using Javascript
提问by Varada
I would like to use JavaScript to make a table row's display:none;and show it again on a click of a button.
我想使用 JavaScript 制作表格行display:none;，然后单击按钮再次显示。
回答by mplungjan
Plain JS - delegation, can handle dynamically inserted rows
纯 JS - 委托，可以处理动态插入的行
window.addEventListener("load", function() {
document.getElementById("nav").addEventListener("click", function(e) {
var tgt = e.target;
if (tgt.tagName === "A") {
e.preventDefault(); // stop click
var rowId = tgt.getAttribute("data-id"),
rowIndex = tgt.getAttribute("data-index"),
row = rowId ? document.getElementById(rowId) : // id passed
document.getElementById('table1').rows[rowIndex - 1]; // idx passed
if (row) row.style.display = (row.style.display == 'none') ? '' : 'none';
}
});
});<div id="nav">
<a href="#" data-id="row3">Toggle row with ID row3</a> |
<a href="#" data-index="2">Toggle 2nd row</a><hr/>
</div>
<table>
<tbody id="table1">
<tr><td>row 1 cell 1</td><td>row 1 cell 2</td><td>row 1 cell 3</td></tr>
<tr><td>row 2 cell 1</td><td>row 2 cell 2</td><td>row 2 cell 3</td></tr>
<tr id="row3"><td>row 3 cell 1</td><td>row 3 cell 2</td><td>row 3 cell 3</td></tr>
</tbody>
</table>Plain JS - inline handler can ALSO handle dynamically inserted rows but the above is preferred
普通 JS - 内联处理程序也可以处理动态插入的行，但以上是首选
function toggle(row) {
if (isNaN(row)) row = document.getElementById(row); // id passed
else row = document.getElementById('table1').rows[row]; // idx passed
if (row) row.style.display = (row.style.display == 'none') ? '' : 'none';
return false;
}<a href="#" onClick="return toggle('row3')">Toggle row with ID row3</a> |
<a href="#" onClick="return toggle(1)">Toggle 2nd row</a><hr/>
<table>
<tbody id="table1">
<tr><td>row 1 cell 1</td><td>row 1 cell 2</td><td>row 1 cell 3</td></tr>
<tr><td>row 2 cell 1</td><td>row 2 cell 2</td><td>row 2 cell 3</td></tr>
<tr id="row3"><td>row 3 cell 1</td><td>row 3 cell 2</td><td>row 3 cell 3</td></tr>
</tbody>
</table>回答by Felix Kling
回答by Blender
This vanilla JS solution works (http://jsfiddle.net/C5g8U/3/):
这个香草 JS 解决方案有效（http://jsfiddle.net/C5g8U/3/）：
tr = document.getElementsByTagName('tr');
for (var i = 0; i < tr.length; i++) {
if (tr[i].getElementsByTagName('td').length == 3) {
tr[i].style.display = 'none';
}
}
I'm a bit rusty with my vanilla JS, as I use jQuery for things like this, so here's a jQuery solution:
我对我的 vanilla JS 有点生疏，因为我使用 jQuery 来做这样的事情，所以这里有一个 jQuery 解决方案：
$('#button').click(function() {
$('tr').each(function() {
if ($(this).find('td').length == 3) {
$(this).toggle();
}
});
});
回答by JK.
Give the <tr>an id and then you can hide it with jQuery:
给<tr>一个 id 然后你可以用 jQuery 隐藏它：
<tr id="sampleRow">
</tr>
$("#button").click(function () {
$("#sampleRow").toggle();
});
Toggle will make it hidden if it is currently visible, and will show it if it is currently hidden.
如果当前可见，切换将使其隐藏，如果当前隐藏则显示它。
