版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/fjxcsdn/article/details/85345687
需求：对表格的数据进行增删改操作
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="script/jquery-3.3.1.min.js"></script>
<style>
#mDiv {
position: absolute;
left: 0px;
top: 0px;
background-color: black;
opacity: 0.1; /*设置不透明度，即可以看到层下面的内容，但是由于层的遮挡，是不可以进行操作的*/
display: none;
}
#xDiv {
position: absolute;
width: 300px;
height: 100px;
border: 1px solid red;
background-color: #e7e7e7;
display: none;
}
</style>
<script>
var list = [
{ id: '1', name: 'Jason', sex: '男' },
{ id: '2', name: '小哲哲', sex: '女' },
{ id: '3', name: '臭屁哲', sex: '女' },
{ id: '4', name: '屁屁哲', sex: '女' }
];
$(function () {
//生成表格数据,通过each遍历所有的数据，添加到list集合
$.each(list, function () {
$('<tr id="' + this.id + '">' +
'<td><input type="checkbox"/></td>' +
'<td>' + this.id + '</td>' +
'<td>' + this.name + '</td>' +
'<td>' + this.sex + '</td>' +
'<td><input type="button" value="修改"/></td>' +
'</tr>').appendTo('#list');
});
//为复选框chkAll设置点击事件，完成全选、全消的功能
$('#chkAll').click(function () {
//根据当前复选框的状态设置其它行复选框的状态
//#list后面有空格，表示获取list集合中的所有子元素
//用到了隐式迭代，将checked属性，一次性设置了所有的list 集合
$('#list :checkbox').attr('checked', this.checked);
});
//反选
$('#btnReverse').click(function () {
//获取实际数据行的复选框，通过each访问每一的对象
$('#list :checkbox').each(function () {//jquery对象.each
this.checked = !this.checked;//将选中的变为不选中的，不选中的进行选中
});
});
//删除选中项
$('#btnRemove').click(function () {
//确认
if (confirm('确定要删除吗')) {
//获取所有数据行中选中的checkbox
//$('#list :checked').parent().parent().remove();
//直接在祖宗节点中找到tr节点
$('#list :checked').parents('tr').remove();
}
});
//添加
$('#btnAdd').click(function () {
//显示添加界面
$('#mDiv').css('display', 'block')
.css('width', window.innerWidth + 'px')//蒙板层进行全面覆盖
.height(window.innerHeight + 'px');
$('#xDiv').css('display', 'block')
.css('left', (window.innerWidth - 300) / 2 + 'px')//居中设置
.css('top', (window.innerHeight - 100) / 2 + 'px');
//添加成功后，清除文本框数据，用的是：text
$('#xDiv :text,:hidden').val('');
});
//保存
$('#btnSave').click(function () {
var id = $('#hidId').val();
if (id == '') { //添加
$('<tr id="' + $('#txtId').val() + '">' +
'<td><input type="checkbox"/></td>' +
'<td>' + $('#txtId').val() + '</td>' +
'<td>' + $('#txtName').val() + '</td>' +
'<td>' + $('#txtSex').val() + '</td>' +
'<td><input type="button" value="修改"/></td>' +
'</tr>').appendTo('#list')
.find(':button').click(function () {//为修改按钮绑定事件
//显示添加界面
$('#mDiv').css('display', 'block')
.css('width', window.innerWidth + 'px')
.height(window.innerHeight + 'px');
$('#xDiv').css('display', 'block')
.css('left', (window.innerWidth - 300) / 2 + 'px')
.css('top', (window.innerHeight - 100) / 2 + 'px');
//找到当前按钮所在td的之前的所有td，因为数据就在这些td中
var tds = $(this).parent().prevAll();
//设置文本框的值
$('#hidId').val(tds.eq(2).text());//作用：在修改后用于查找原始数据的行
$('#txtId').val(tds.eq(2).text());
$('#txtName').val(tds.eq(1).text());
$('#txtSex').val(tds.eq(0).text())
});
} else {//修改
var tds = $('#' + id + '>td');
tds.eq(1).text($('#txtId').val());
tds.eq(2).text($('#txtName').val());
tds.eq(3).text($('#txtSex').val());
//改tr的id属性，保持数据一致
$('#' + id).attr('id', $('#txtId').val());
}
//保存成功后，并退出保存界面，也让蒙板层消失
$('#mDiv').css('display', 'none');
$('#xDiv').css('display', 'none');
});
//修改
$('#list :button').click(function () {
//显示添加界面
$('#mDiv').css('display', 'block')
.css('width', window.innerWidth + 'px')
.height(window.innerHeight + 'px');
$('#xDiv').css('display', 'block')
.css('left', (window.innerWidth - 300) / 2 + 'px')
.css('top', (window.innerHeight - 100) / 2 + 'px');
//找到当前按钮所在td的之前的所有td，因为数据就在这些td中
var tds = $(this).parent().prevAll();
//设置文本框的值
$('#hidId').val(tds.eq(2).text());//作用：在修改后用于查找原始数据的行
$('#txtId').val(tds.eq(2).text());
$('#txtName').val(tds.eq(1).text());
$('#txtSex').val(tds.eq(0).text());
});
});
</script>
</head>
<body>
<input type="button" id="btnAdd" value="添加" />
<input type="button" id="btnReverse" value="反选" />
<input type="button" id="btnRemove" value="删除选中项" />
<table border="1">
<thead>
<th width="100"><input type="checkbox" id="chkAll" /></th>
<th width="100">编号</th>
<th width="100">姓名</th>
<th width="100">性别</th>
<th width="100">修改</th>
</thead>
<tbody id="list"></tbody>
</table>
<div id="mDiv">
</div>
<div id="xDiv">
<input type="hidden" id="hidId" />
编号：<input type="text" id="txtId" />
<br />
姓名：<input type="text" id="txtName" />
<br />
性别：<input type="text" id="txtSex" />
<br />
<input type="button" id="btnSave" value="保存" />
</div>
</body>
</html>
效果展示：
修改功能是这里的难点：
第一步是如何获取修改的的数据，
第二步是修改完成后保存时，保存的是哪行的数据
第三步：新增的数据，修改功能绑定事件
如果本篇博客对您有所帮助，记得点赞哦！