jQuery动态添加或删除表格行

引言

在开发网页应用程序时，我们经常需要使用表格来展示数据。在某些情况下，我们可能需要动态地添加或删除表格行，以实现一些交互功能。本文将介绍如何使用jQuery库来实现表格行的添加或删除。

添加表格行

要在表格中添加新的行，我们可以使用.append()方法。首先，我们需要确保目标表格的HTML结构已经构建完毕。例如，我们有一个id为"table"的表格，可以通过下面的HTML代码创建：

<table id="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

接下来，我们可以使用以下jQuery代码来添加新的行：

$("#table tbody").append(`
  <tr>
    <td>Tom</td>
    <td>27</td>
    <td>男</td>
  </tr>
`);

这样，即可往表格的最后一行添加一行新的数据，其中包含姓名、年龄和性别三列。

删除表格行

要从表格中删除行，我们可以使用.remove()方法。假设我们要删除表格中的第二行，可以使用以下代码：

$("#table tbody tr:eq(1)").remove();

这样，即可删除第二行（索引为1）。

结论

通过使用jQuery库，我们可以轻松地实现表格行的添加和删除。这对于具有交互性的网页应用程序来说非常有用。希望本文对你有所帮助，谢谢阅读！

注：本文示例代码基于jQuery库的版本3.5.1进行演示，其他版本也可适用。

参考链接：

• jQuery官方文档
• jQuery append()方法文档
• jQuery remove()方法文档