以下是一个基于
jQuery实现的动态增删改查表格，其中每条数据带有
复选框：
HTML代码：
```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代码：
```javascript
// 全选/取消全选
$("#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 edi
tRow = "<
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(edi
tRow);
});
// 点击删除按钮
$("#myTable").on("
click", ".deleteBtn", function() {
$(this).parents("
tr").remove();
});
```
以上代码实现了动态增删改查表格，并且每条数据带有
复选框。其中，全选/取消全选、单个
复选框状态
改变时
改变全选
复选框状态通过
jQuery实现；新增、保存、取消、编辑、删除等操作通过绑定
jQuery事件实现。
最低0.47元/天 解锁文章
7424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
