JavaScript 删除表格内容：快速、完整指南

<div id="tableContainer">
  <table id="myTable">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </table>
  <button onclick="removeTable()">删除表格</button>
</div>
<script>
function removeTable() {
  var table = document.getElementById("myTable");
  table.remove(); // 或者使用 table.parentNode.removeChild(table);
}
</script>
<h2>如何使用 JavaScript 删除表格内容</h2>
<p>删除一个表格需要以下步骤：</p>
<ol>
<li><strong>找到表格的父元素：</strong> 通常，表格位于一个 <code>&lt;div&gt;</code> 或 <code>&lt;body&gt;</code> 元素中。</li>
<li><strong>使用 JavaScript 获取表格元素：</strong> 可以使用 <code>getElementById()</code> 或 <code>querySelector()</code> 等 DOM 操作方法找到表格元素。</li>
<li><strong>删除表格元素：</strong> 使用 <code>remove()</code> 或 <code>parentNode.removeChild()</code> 方法将表格元素从 DOM 树中移除。</li>
</ol>
<h2>代码示例</h2>
<p>以下是一个示例代码，演示了如何使用 JavaScript 删除表格：</p>
<pre><code class="language-html">&lt;div id=&quot;tableContainer&quot;&gt;
  &lt;table id=&quot;myTable&quot;&gt;
    &lt;tr&gt;
      &lt;th&gt;姓名&lt;/th&gt;
      &lt;th&gt;年龄&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;张三&lt;/td&gt;
      &lt;td&gt;25&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;李四&lt;/td&gt;
      &lt;td&gt;30&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;button onclick=&quot;removeTable()&quot;&gt;删除表格&lt;/button&gt;
&lt;/div&gt;

&lt;script&gt;
function removeTable() {
  var table = document.getElementById(&quot;myTable&quot;);
  table.remove(); // 或者使用 table.parentNode.removeChild(table);
}
&lt;/script&gt;
</code></pre>
<h2>常见问题解答</h2>
<p><strong>1. 如何删除表格内的特定行或列？</strong></p>
<p>可以使用 <code>getElementsByTagName()</code> 或 <code>querySelectorAll()</code> 获取表格内的所有行或列，然后使用循环遍历并使用 <code>remove()</code> 或 <code>removeChild()</code> 方法删除特定行或列。</p>
<p><strong>2. 如何删除表格内的所有内容，但保留表格结构？</strong></p>
<p>可以使用 <code>innerHTML</code> 属性将表格内容清空：</p>
<pre><code class="language-javascript">var table = document.getElementById(&quot;myTable&quot;);
table.innerHTML = &quot;&quot;;
</code></pre>
<h2>总结</h2>
<p>本文介绍了使用 JavaScript 删除表格内容的步骤和方法，并提供了代码示例和常见问题解答。希望本文能帮助您更好地理解和应用 JavaScript 删除表格内容的方法。</p>