Question

我们说我有这样一张桌子：

＆＃13;

<table id="datatable1">
  <tr>
    <th>Header column 1</th>
    <th>Header column 2</th>
  </tr>
  <!-- Remove everything from here down until </table> -->
  <tr>
    <td>Data row 1, column 1</td>
    <td>Data row 1, column 2</td>
  </tr>
  <tr>
    <td>Data row 2, column 1</td>
    <td>Data row 2, column 2</td>
  </tr>
</table>

＆＃13;

正如评论所说，我想删除标题行下面的每一行。或者，在更多技术术语中，我想删除注释中的每个元素，直到结束表标记。

我不想使用jQuery，所以这个问题与Stack Overflow上的其他问题不同。我尝试了一些纯粹的JS解决方案（这就是我想要的），但它们太复杂了，我无法理解它！

感谢您的帮助。

到目前为止，我已经从另一个教程中尝试了这个，但它说“无法读取属性＆＃39;长度＆＃39;未定义＆＃39;：

function clearTable(table) {
    var rows = table.rows;
    var i = rows.length;
    while (--i) {
        rows[i].parentNode.removeChild(rows[i]);
        // or
        // table.deleteRow(i);
    }
}

Answer 1

删除第二个元素，直到只剩下一个元素：

var table = document.getElementById("datatable1");

while (table.rows.length > 1) {
  table.deleteRow(1);
}

<table id="datatable1">
  <tr>
    <th>Header column 1</th>
    <th>Header column 2</th>
  </tr>
  <!-- Remove everything from here down until </table> -->
  <tr>
    <td>Data row 1, column 1</td>
    <td>Data row 1, column 2</td>
  </tr>
  <tr>
    <td>Data row 2, column 1</td>
    <td>Data row 2, column 2</td>
  </tr>
</table>

Answer 2

您可以获得第一个tr并将其替换为所有表体。

var mytbl = document.getElementById("table1");
mytbl.getElementsByTagName("tbody")[0].innerHTML = mytbl.rows[0].innerHTML;

<table id="table1">
  <tr>
    <th>Header column 1</th>
    <th>Header column 2</th>
  </tr>
  <!-- Remove everything from here down until </table> -->
  <tr>
    <td>Data row 1, column 1</td>
    <td>Data row 1, column 2</td>
  </tr>
  <tr>
    <td>Data row 2, column 1</td>
    <td>Data row 2, column 2</td>
  </tr>
</table>

Answer 3

如果需要，可以使用CSS。 tr+tr选择除第一行以外的所有行。

tr + tr {
  display: none;
}

<table>
  <tr>
    <th>Header column 1</th>
    <th>Header column 2</th>
  </tr>
  <!-- Remove everything from here down until </table> -->
  <tr>
    <td>Data row 1, column 1</td>
    <td>Data row 1, column 2</td>
  </tr>
  <tr>
    <td>Data row 2, column 1</td>
    <td>Data row 2, column 2</td>
  </tr>
</table>

如何删除HTML表格中的所有元素（第一个除外）

3 个答案: