使用 Javascript 切换表的显示：无

Question

我想使用 JavaScript 来制作表格行的 display:none; 并通过单击按钮再次显示它。

Answer 1

普通 JS - 委托，可以处理动态插入的行

window.addEventListener("DOMContentLoaded", 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>

普通 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>

Answer 2

您必须修改 样式< /a> 元素的属性：

// `rowElement` is a reference to the row you want to hide
rowElement.style.display = 'none';

Answer 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';
  }
}

我'我对我的普通 JS 有点生疏，因为我使用 jQuery 来做这样的事情，所以这里有一个 jQuery 解决方案：

$('#button').click(function() {
  $('tr').each(function() {
    if ($(this).find('td').length == 3) {
      $(this).toggle();
    }
  });
});

Answer 4

给 一个 id，然后您可以使用 jQuery 隐藏它：

<tr id="sampleRow">
</tr>

$("#button").click(function () {
    $("#sampleRow").toggle(); 
});

如果当前可见，Toggle 会将其隐藏，如果当前隐藏，则显示它。