如何使用jQuery动态添加/删除表行

下面是使用jQuery动态添加/删除表行的完整攻略：

1. 添加一行表格

1.1 HTML结构

首先，需要在HTML文件中添加一个表格和一个按钮：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>[e-mail]</td>
    </tr>
  </tbody>
</table>

<button id="addRowBtn">Add Row</button>

上面的代码中，表格中已经有了一行数据，按钮的id为"addRowBtn"。

1.2 jQuery代码

接下来，需要使用jQuery来动态添加一行表格。代码如下：

$(document).ready(function() {
  $("#addRowBtn").click(function() {
    $("#myTable tbody").append(`
      <tr>
        <td>New Name</td>
        <td>New Age</td>
        <td>New Email</td>
      </tr>
    `);
  });
});

上述代码中，当按钮被点击时，会添加一行到表格的tbody中，新行中的数据可以根据实际需求进行替换。

2. 删除一行表格

2.1 HTML结构

下面我们再添加一个按钮，用来删除表格的最后一行：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>[e-mail]</td>
    </tr>
  </tbody>
</table>

<button id="addRowBtn">Add Row</button>
<button id="deleteRowBtn">Delete Row</button>

2.2 jQuery代码

接下来，需要使用jQuery来删除表格的最后一行。代码如下：

$(document).ready(function() {
  $("#addRowBtn").click(function() {
    $("#myTable tbody").append(`
      <tr>
        <td>New Name</td>
        <td>New Age</td>
        <td>New Email</td>
      </tr>
    `);
  });

  $("#deleteRowBtn").click(function() {
    $("#myTable tbody tr:last-child").remove();
  });
});

上述代码中，当删除按钮被点击时，会从表格的tbody中删除最后一行数据。

至此，已经完成了使用jQuery动态添加/删除表行的完整攻略。

示例说明

下面我们通过两个示例来说明一下上述代码的具体应用。

示例1：动态添加一行

假设现在需要添加一行数据到表格中，数据如下：

Name	Age	Email
Anne	25	[e-mail]

在页面中点击"Add Row"按钮后，会在表格中添加一行新的数据。

示例2：动态删除一行

假设现在需要删除表格中最后一行数据。在页面中点击"Delete Row"按钮后，表格中的最后一行数据应该被删除。