如何删除HTML表格中除第一个<tr>元素以外的所有元素？

Question

假设我有这样一张表格：

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

如注释所述，我想删除标题行以下的每一行。或者更加技术化地说，我想从注释中删除每个元素直到结束表格标记。

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

感谢您的任何帮助。

到目前为止，我已经尝试了另一个教程中的代码，但它显示“无法读取未定义的属性'length'”。

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

- S. Jones

---

请发布一下你目前尝试过的内容。 - Huangism

尝试使用tbody{display:none}或tbody > tr{display:none}。 - blecaf

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>

- user4531029

---

@Huangism 我该如何编辑这个答案中的Javascript来适应这个需求呢？ - S. Jones

@S. Jones <table id="foo"> ... </table>，请将第一行替换为 var table = document.getElementById("foo").children[0]; - user4531029

Sumeet的答案也获取了一个带有ID的表格。 - Huangism

@S.Jones 你是这样做的吗？https://jsbin.com/xavoqataxu/edit?html,js,output - user4531029

@S.Jones 我使用另一个答案中的信息进一步改进了它。现在代码更加简洁明了，请尝试当前代码。 - user4531029

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>

- sumeet kumar

---

你能解释一下tbody是从哪里来的吗？ - S. Jones

除了您的原始代码外，您可以将tbody替换为table。 - Huangism

@S.Jones 大多数现代浏览器都会自动插入这个。不过你仍然可以手动选择它。 - user4531029

是的，tbody 是表示表格主体的标准元素。在标记中不需要将其放置，但浏览器会将其包含在 DOM 中。 - sumeet kumar

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>

- mpen

---

这只是隐藏它们而不是删除它们。 - Huangism

@Huangism确实如此，但他将问题标记为“CSS”，所以谁知道他想要什么。它们在视觉上消失了。其他人已经发布了JS解决方案。 - mpen

好的，OP确实说过“我尝试了一些纯JS解决方案（这正是我想要的）”。标题非常明确地说明了删除，但是也许隐藏它们已经足够了。 - Huangism