<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#cover {
position: fixed;
background-color: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
#model {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 400px;
margin-left: -200px;
margin-top: -100px;
background-color: white;
text-align: center;
line-height: 50px;
overflow: hidden;
z-index: 11;
}
.hide {
display: none;
}
</style>
</head>
<body>
<!--模态框-->
<div id="cover" class="hide">
<div id="model">
<label>
姓名：<input id="name" type="text">
</label>
<hr>
<label>
爱好：<input id="hobby" type="text">
</label>
<hr>
<button id="model-sure">确认</button>
<button id="model-cancel">取消</button>
</div>
</div>
<!--功能按钮-->
<button id="selectAll">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<button id="add">新增</button>
<!--表单-->
<table border="2px">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
<th>修改</th>
</tr>
</thead>
<tbody>
<tr>
<td><label><input type="checkbox"></label></td>
<td>alex</td>
<td>喝酒</td>
<td>
<button class="fire">开除</button>
</td>
<td>
<button class="edit">编辑</button>
</td>
</tr>
<tr>
<td><label><input type="checkbox"></label></td>
<td>egon</td>
<td>抽烟</td>
<td>
<button class="fire">开除</button>
</td>
<td>
<button class="edit">编辑</button>
</td>
</tr>
<tr>
<td><label><input type="checkbox"></label></td>
<td>wusir</td>
<td>打牌</td>
<td>
<button class="fire">开除</button>
</td>
<td>
<button class="edit">编辑</button>
</td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
let $checkboxObj = $('input:checkbox');
// 全选按钮绑定事件
// 1、找到全选按钮绑定点击事件
$('#selectAll').on('click', function () {
// 2、点击事件触发后找到所有checkbox input标签并把checked属性设置真
$checkboxObj.prop('checked', true);
});
//取消按钮绑定事件
//1、找到取消绑定点击事件
$('#cancel').on('click', function () {
//2、将所有的input-checkbox标签设置成假
$checkboxObj.prop('checked', false);
});
//反选按钮绑定事件
//1、找到反选按钮绑定点击事件
$('#reverse').on('click', function () {
//循环找到的input-checkbox标签
for (let i = 0; i < $checkboxObj.length; i++) {
//获取每个input-checkbox标签的checked值
let state = $($checkboxObj[i]).prop('checked');
//将每个input-checkbox标签的checked值取反设置
$($checkboxObj[i]).prop('checked', !state);
}
});
//给新增按钮绑定事件
//1、找到新增按钮绑定点击事件
$('#add').on('click', function () {
// 2、将模态框的hide类去掉，模态框显示
$('#cover').removeClass('hide');
});
//给模态框取消按钮绑定事件
//1、找到模态框取消按钮绑定点击事件
$('#model-cancel').on('click', function () {
// 2、将模态框的hide类重新添加，模态框隐藏
$('#cover').addClass('hide');
});
//给模态框确认按钮绑定事件
//1、找到模态框确认按钮绑定点击事件
$('#model-sure').on('click', function () {
// 2、获取模态框中姓名和爱好两个文本标签的内容
let name = $('#name').val();
let hobby = $('#hobby').val();
if (!$(this).data('obj')) {
//创建列表的tr标签
let trEle = document.createElement('tr');
//在表单tbody的子内容中添加创建的tr标签
$('tbody').append(trEle);
//字符串拼接获取的姓名和内容并添加到tr的子内容中去
let str = `<td><label><input type="checkbox"></label></td><td>${name}</td><td>${hobby}
</td><td><button class="fire">开除</button></td><td><button class="edit">编辑</button></td>`;
$(trEle).append(str);
//提交成功后自动隐藏模态框
$('#cover').addClass('hide');
}
else {
let editThis = $('#model-sure').data('obj');
$(editThis).parent().prev().prev().text(hobby);
$(editThis).parent().prev().prev().prev().text(name);
$('#cover').addClass('hide');
}
});
//绑定开除按钮(注意由于后面会新增开除按钮，所以用事件委托给tbody标签)
// 1、找到tbody标签并接受tbody子孙中开除按钮委托的点击事件
$('tbody').on('click', '.fire', function () {
// 2、将事件触发者所在的那一行删除掉
$(this).parent().parent().remove()
});
//给编辑按钮绑定点击事件(注意由于后面会新增编辑按钮，所以用事件委托给tbody标签))
$('tbody').on('click', '.edit', function () {
// 2、将事件触发者所在的那一行删除掉
$('#cover').removeClass('hide');
$('#model-sure').data('obj', this)
})
</script>
</body>
</html>
