jQuery动态添加和删除表格记录

原创

mob649e815d65e6 2024-01-22 10:14:51 ©著作权

文章标签 删除表动态添加 jQuery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e815d65e6的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery动态添加和删除表格记录

在前端开发中，经常会遇到需要动态添加和删除表格记录的需求。通过使用jQuery，我们可以轻松地实现这一功能。本文将介绍如何使用jQuery动态添加和删除表格记录，并提供相应的代码示例。

动态添加表格记录

动态添加表格记录是指在当前表格的最后一行添加一条新的记录。下面是一个使用jQuery实现动态添加表格记录的示例代码：

// 获取表格对象
var table = $('#myTable');

// 获取表格的最后一行
var lastRow = table.find('tbody tr:last');

// 克隆最后一行
var newRow = lastRow.clone();

// 清空新行中的输入框内容
newRow.find('input').val('');

// 将新行插入到表格的最后一行之后
table.append(newRow);

在上述示例代码中，首先通过$('#myTable')获取表格对象，然后使用find('tbody tr:last')找到表格的最后一行。接下来，通过clone()方法克隆最后一行，并使用find('input')找到新行中的输入框，使用val('')清空输入框的内容。最后，通过append()方法将新行插入到表格的最后一行之后。

动态删除表格记录

动态删除表格记录是指删除表格中选中的一行记录。下面是一个使用jQuery实现动态删除表格记录的示例代码：

// 获取选中的复选框
var selectedRows = $('#myTable input[type="checkbox"]:checked');

// 遍历选中的复选框
selectedRows.each(function() {
  // 获取当前复选框所在行
  var row = $(this).closest('tr');
  
  // 删除当前行
  row.remove();
});

在上述示例代码中，首先通过$('#myTable input[type="checkbox"]:checked')获取选中的复选框。然后使用each()方法遍历选中的复选框，通过closest('tr')方法获取当前复选框所在的行，并使用remove()方法删除当前行。

完整示例代码

下面是一个完整的示例代码，演示了如何使用jQuery动态添加和删除表格记录：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery动态添加和删除表格记录</title>
  <script src="
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" name="name"></td>
        <td><input type="text" name="age"></td>
        <td><input type="checkbox"></td>
      </tr>
    </tbody>
  </table>
  <button id="addButton">添加记录</button>
  <button id="deleteButton">删除记录</button>

  <script>
    $(document).ready(function() {
      // 添加记录按钮点击事件
      $('#addButton').click(function() {
        var table = $('#myTable');
        var lastRow = table.find('tbody tr:last');
        var newRow = lastRow.clone();
        newRow.find('input').val('');
        table.append(newRow);
      });

      // 删除记录按钮点击事件
      $('#deleteButton').click(function() {
        var selectedRows = $('#myTable input[type="checkbox"]:checked');
        selectedRows.each(function() {
          var row = $(this).closest('tr');
          row.remove();
        });
      });
    });
  </script>
</body>
</html>

在上述示例代码中，我们在表格上方添加了一个"添加记录"按钮和一个"删除记录"按钮。当点击"添加记录"按钮时，会添加一条新的记录到表格中；当点击"删除记录"按钮时，会删除选中的记录。

通过上述示例代码，我们可以很方便地实现动态添加和删除表格记录的功能。希望本文对你理解和学习jQuery动态添加和删除表格记录有所帮助。