如何使用jQuery从表中删除表行

下面是“如何使用jQuery从表中删除表行”的完整攻略：

步骤一：准备HTML表格结构

首先，我们需要创建一个HTML表格结构，结构包含表头和表体两部分，示例HTML代码如下：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td>Male</td>
      <td><button class="deleteRow">Delete</button></td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>23</td>
      <td>Female</td>
      <td><button class="deleteRow">Delete</button></td>
    </tr>
  </tbody>
</table>

其中，表头部分包含四列，分别为姓名、年龄、性别、操作；表体部分包含两行数据，每行数据包含三列，分别为姓名、年龄、性别，以及一个“删除”按钮。

步骤二：添加jQuery代码

接下来，我们需要添加jQuery代码来实现从表格中删除行的功能。示例代码如下：

$(document).ready(function() {
  $('#myTable').on('click', '.deleteRow', function() {
    $(this).closest('tr').remove();
  });
});

这段代码分为两部分：

1. 设置事件委托，当点击表格中的“删除”按钮时，触发执行相应的代码；
2. 找到当前按钮所在的行（即该按钮所在的<td>父元素所在的<tr>元素），并将其从DOM中删除。

步骤三：测试结果

将HTML代码和jQuery代码复制到一个HTML文件中，并在浏览器中打开该文件，即可看到一个包含表格和“删除”按钮的页面。点击任意一个“删除”按钮，即可删除该按钮所在的行。再次点击“删除”按钮，即可发现该行已经被从表格中删除了。