jQuery Table删除某一行|极客教程

jQuery Table删除某一行

在Web开发中，使用表格展示数据是非常常见的操作。在表格中，有时候需要实现删除某一行的功能。本文将介绍使用jQuery实现删除表格中的某一行的方法。

1. HTML表格结构

首先，我们需要准备一个简单的HTML表格结构。下面是一个示例的HTML代码：

<table id="myTable" border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td><button class="delete-btn">Delete</button></td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>30</td>
      <td><button class="delete-btn">Delete</button></td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>22</td>
      <td><button class="delete-btn">Delete</button></td>
    </tr>
  </tbody>
</table>

在这个表格中，每一行都有一个“Delete”按钮，点击该按钮将删除对应的行。

2. jQuery实现删除功能

接下来，我们使用jQuery来实现删除功能。首先，我们需要在HTML文件中引入jQuery库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后，我们监听“Delete”按钮的点击事件，并在点击时删除对应的行。下面是实现的jQuery代码：

$(document).ready(function(){
  // 监听“Delete”按钮的点击事件
  $('.delete-btn').on('click', function(){
    // 获取点击按钮所在的行
    var row = $(this).closest('tr');
    // 删除该行
    row.remove();
  });
});

在上面的代码中，我们首先使用$(document).ready()方法来确保页面加载完成后再执行代码。然后使用.on('click')方法监听“Delete”按钮的点击事件。在点击事件中，我们使用$(this).closest('tr')获取点击按钮所在的行，并使用row.remove()方法将该行从表格中删除。

3. 运行效果

现在，我们将上面的HTML表格和jQuery代码组合在一起，运行看一下效果。请注意，点击“Delete”按钮时，对应的行将被删除。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delete Row</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="myTable" border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td><button class="delete-btn">Delete</button></td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>30</td>
      <td><button class="delete-btn">Delete</button></td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>22</td>
      <td><button class="delete-btn">Delete</button></td>
    </tr>
  </tbody>
</table>

<script>
   $(document).ready(function(){$ ('.delete-btn').on('click', function(){
      var row = $(this).closest('tr');
      row.remove();
    });
  });
</script>

</body>
</html>

通过上面的代码，我们可以实现在点击“Delete”按钮时删除对应的行的功能。