正文

学会用jQuery轻松删除表单中的任意一行数据

/0 浏览量
0415

在Web开发中，表单是收集用户输入信息的重要工具。有时候，我们可能需要在表单中动态地添加或删除行，以适应不同的场景。jQuery作为一款强大的JavaScript库，可以帮助我们轻松实现这一功能。本文将介绍如何使用jQuery删除表单中的任意一行数据。

1. 准备工作

首先，我们需要在HTML中创建一个表单，并为其添加一些行。以下是一个简单的示例：

<form id="myForm">
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td><button class="deleteRow">删除</button></td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td><button class="deleteRow">删除</button></td>
    </tr>
  </table>
  <button id="addRow">添加行</button>
</form>

在上面的示例中，我们创建了一个包含两行数据的表单。每行数据中都有一个按钮，用于删除该行。

2. 添加jQuery代码

接下来，我们需要编写jQuery代码来实现删除行的功能。以下是完整的示例：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // 删除行
    $('.deleteRow').click(function() {
      $(this).closest('tr').remove();
    });

    // 添加行
    $('#addRow').click(function() {
      var newRow = '<tr><td><input type="text" name="name"></td><td><input type="text" name="age"></td><td><button class="deleteRow">删除</button></td></tr>';
      $('#myForm table').append(newRow);
    });
  });
</script>

在上面的代码中，我们首先为.deleteRow按钮添加了一个点击事件监听器。当按钮被点击时，它会找到最接近的<tr>元素（即当前行），并使用.remove()方法将其删除。

同时，我们还为#addRow按钮添加了一个点击事件监听器。当按钮被点击时，它会创建一个新的<tr>元素，并将其添加到表单的表格中。

3. 代码说明

  • $(document).ready(function() { ... });：这是一个jQuery方法，用于确保DOM元素已经加载完毕，然后执行其中的代码。
  • $(this).closest('tr').remove();：$(this)表示当前点击的按钮，.closest('tr')表示找到最近的<tr>元素，.remove()方法用于删除该元素。
  • var newRow = '<tr><td><input type="text" name="name"></td><td><input type="text" name="age"></td><td><button class="deleteRow">删除</button></td></tr>';：这行代码用于创建一个新的<tr>元素，其中包含姓名、年龄和删除按钮。
  • $('#myForm table').append(newRow);：这行代码将新创建的行添加到表单的表格中。

通过以上步骤，我们就可以使用jQuery轻松地删除表单中的任意一行数据了。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --