jQuery清空table数据

在网页开发中，我们经常需要动态地向页面中的表格（table）中添加数据。但有时候我们也需要清空表格中已有的数据，以便重新填充或者其他操作。本文将介绍如何使用jQuery来清空table中的数据。

使用empty()方法清空table数据

jQuery提供了一个方便的方法empty()来清空元素中的所有子元素。我们可以利用这个方法来清空table中的数据。

示例代码
```html
<table id="myTable">
  <tr>
    <td>1</td>
    <td>John Doe</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane Smith</td>
  </tr>
</table>

<button id="clearBtn">Clear Table</button>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
$(document).ready(function() {
  $("#clearBtn").click(function() {
    $("#myTable").empty();
  });
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

在上面的示例代码中，我们首先创建了一个包含数据的表格，并且添加了一个按钮用来清空表格数据。当用户点击按钮时，通过jQuery选择器选中表格元素并调用empty()方法来清空数据。

代码解析

  • $(document).ready(function() { ... });: 这段代码用来确保页面加载完成后再执行jQuery代码，以防止元素未加载完全导致选择器无法找到元素。

  • $("#clearBtn").click(function() { ... });: 这段代码表示当按钮被点击时执行后面的代码。

  • $("#myTable").empty();: 这行代码选中id为myTable的表格元素，并清空其所有子元素，即清空表格数据。

总结

通过使用jQuery的empty()方法，我们可以方便地清空table中的数据，使得表格重新变为空。这在一些需要动态展示数据的页面中非常有用。希望本文能够帮助到你更好地理解如何清空table数据。