JavaScript - 清空表格内容

在编写JavaScript代码时，清空表格的内容是一项常见的任务。本文将介绍如何使用JavaScript清空表格的内容。

步骤

以下是在JavaScript中清空表格内容的步骤：

1. 获取表格元素。可以使用document.getElementById()获取表格元素的引用。例如：

   var table = document.getElementById("myTable");
   

2. 获取表格的tbody元素。tbody元素包含了表格中的数据行。可以使用table.tBodies[0]获取表格的第一个tbody元素。例如：

   var tbody = table.tBodies[0];
   

3. 移除旧的数据行。可以使用tbody.innerHTML = ""清空tbody元素的内容。例如：

   tbody.innerHTML = "";
   

示例

以下是通过JavaScript清空表格内容的完整示例：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Smith</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>35</td>
    </tr>
  </tbody>
</table>

<button onclick="clearTable()">Clear Table</button>

<script>
  function clearTable() {
    var table = document.getElementById("myTable");
    var tbody = table.tBodies[0];
    tbody.innerHTML = "";
  }
</script>

在上面的示例中，点击“Clear Table”按钮将清空表格中的数据行。

总结

使用JavaScript清空表格内容是一项非常简单的任务。我们可以使用innerHTML属性从DOM中移除数据行。当我们需要重新填充表格时，可以使用其他JavaScript代码生成数据行并添加到表格中。