table 折叠（隐藏行）不起作用 Javascript

Question

function tablecollapse()
{

    var table = document.getElementById(tblbatting);
    var rowCount = table.rows.length;

    for(var i=4; i< rowCount; i++) 
    {
        var row = table.rows[i];
        row.display="none";
    }
}

我有此代码运行 onload() 但 table 的连接没有隐藏。这段代码有什么问题？或任何其他建议？

Answer 1

代码中有两个错误。首先，您需要在 var table = document.getElementById(tblbatting); 中的 table 元素 id 两边加上引号。所以，这段代码变成了var table = document.getElementById("tblbatting");.

其次，要设置显示样式，需要访问table行元素的样式属性。所以 row.display="none"; 变成 row.style.display="none";.

var table = document.getElementById("tblbatting");
var rowCount = table.rows.length;

for(var i=4; i< rowCount; i++) 
{
    var row = table.rows[i];
    row.style.display="none";
}

我不确定你是否有意这样做，但你应该知道你的代码不会隐藏 table 的前 4 行，因为你已经使用 var i=4初始化你的循环计数器。

Answer 2

韦恩说的。他比我快多了。

function tablecollapse(id) {

  var table = document.getElementById(id);
  var rows = table.rows;

  for (var i = 4; i < rows.length; i++) {
    rows[i].style.display = "none";
  }
}

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<table id="foo">
  <thead>
    <td>Column</td>
    <td>Column</td>
  </thead>
  <tr>
    <td>one</td>
    <td>one</td>
  </tr>
  <tr>
    <td>two</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>three</td>
  </tr>
  <tr>
    <td>four</td>
    <td>four</td>
  </tr>
  <tr>
    <td>five</td>
    <td>five</td>
  </tr>

</table>
<button onclick="tablecollapse('foo')">Collapse</button>

table 折叠（隐藏行）不起作用 Javascript

table collapse (rows hide) not working Javascript

javascript

row

html-table

hide