Question

我想使用JavaScript创建一个表格行display:none;，然后点击一下按钮再次显示它。

Answer 1

普通JS - http://jsfiddle.net/mplungjan/t3mUq/

<script type="text/javascript">
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;
}

</script>
<a href="#" 
onClick="return toggle('row3')">Toggle row with ID row3</a>
<a href="#" 
onClick="return toggle(1)">Toggle 2nd row</a>

Answer 2

您必须修改元素的style属性：

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

Answer 3

这个vanilla 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

给<tr>一个id然后你可以用jQuery隐藏它：

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

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

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

使用Javascript切换表格的显示：none

4 个答案: