jquery表格实现动态增删改查，表格每条数据带复选框

以下是一个基于jQuery实现的动态增删改查表格，其中每条数据带有复选框：

HTML代码：

<table id="myTable">
  <thead>
    <tr>
      <th><input type="checkbox" id="checkAll"></th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="checkItem"></td>
      <td>张三</td>
      <td>20</td>
      <td>
        <button class="editBtn">编辑</button>
        <button class="deleteBtn">删除</button>
      </td>
    </tr>
  </tbody>
</table>
<button id="addBtn">新增</button>

jQuery代码：

// 全选/取消全选
$("#checkAll").click(function() {
  $(".checkItem").prop("checked", this.checked);
});

// 单个复选框状态改变时改变全选复选框状态
$(".checkItem").change(function() {
  if ($(this).prop("checked") === false) {
    $("#checkAll").prop("checked", false);
  } else if ($(".checkItem:checked").length === $(".checkItem").length) {
    $("#checkAll").prop("checked", true);
  }
});

// 点击新增按钮
$("#addBtn").click(function() {
  var newRow = "<tr>" +
    "<td><input type='checkbox' class='checkItem'></td>" +
    "<td><input type='text' class='nameInput'></td>" +
    "<td><input type='text' class='ageInput'></td>" +
    "<td><button class='saveBtn'>保存</button>" +
    "<button class='cancelBtn'>取消</button></td>" +
    "</tr>";
  $("#myTable tbody").append(newRow);
});

// 点击保存按钮
$("#myTable").on("click", ".saveBtn", function() {
  var name = $(this).parents("tr").find(".nameInput").val();
  var age = $(this).parents("tr").find(".ageInput").val();
  var newRow = "<tr>" +
    "<td><input type='checkbox' class='checkItem'></td>" +
    "<td>" + name + "</td>" +
    "<td>" + age + "</td>" +
    "<td><button class='editBtn'>编辑</button>" +
    "<button class='deleteBtn'>删除</button></td>" +
    "</tr>";
  $(this).parents("tr").replaceWith(newRow);
});

// 点击取消按钮
$("#myTable").on("click", ".cancelBtn", function() {
  $(this).parents("tr").remove();
});

// 点击编辑按钮
$("#myTable").on("click", ".editBtn", function() {
  var name = $(this).parents("tr").find("td:eq(1)").text();
  var age = $(this).parents("tr").find("td:eq(2)").text();
  var editRow = "<tr>" +
    "<td><input type='checkbox' class='checkItem'></td>" +
    "<td><input type='text' class='nameInput' value='" + name + "'></td>" +
    "<td><input type='text' class='ageInput' value='" + age + "'></td>" +
    "<td><button class='saveBtn'>保存</button>" +
    "<button class='cancelBtn'>取消</button></td>" +
    "</tr>";
  $(this).parents("tr").replaceWith(editRow);
});

// 点击删除按钮
$("#myTable").on("click", ".deleteBtn", function() {
  $(this).parents("tr").remove();
});

以上代码实现了动态增删改查表格，并且每条数据带有复选框。其中，全选/取消全选、单个复选框状态改变时改变全选复选框状态通过jQuery实现；新增、保存、取消、编辑、删除等操作通过绑定jQuery事件实现。