【原创】利用js生成动态表格 实现删除、复制、全选、反选功能：
不多说下面放代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>动态生成表格 并实现 删除、 复制 、 全选、反选</title>
<style type="text/css">
table {
margin-top: 15px;
border-collapse: collapse;
border: 1px solid #aaa;
width: 100%;
}
table th {
vertical-align: baseline;
padding: 5px 15px 5px 6px;
background-color: #3F3F3F;
border: 1px solid #3F3F3F;
text-align: left;
color: #fff;
}
table td {
vertical-align: text-top;
padding: 6px 15px 6px 6px;
border: 1px solid #aaa;
}
table tr:nth-child(2n) {
background-color: #F5F5F5;
}
table tr:nth-child(2n-1) {
background-color: #fff;
}
#color {
background:yellowgreen;
}
</style>
<script type="text/javascript">
//【注】利用时间委托实现
window.onload = function() {
//利用字符串模板动态生成table
var table = `
<table id="table_box">
<thead id="thead">
<tr>
<th><input type="checkbox" id="checkbox2" />全<input type="checkbox" id="checkbox3" />反</th>
<th>姓名</th>
<th>爱好</th>
<th>电话</th>
<th>地址</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td><input type="checkbox" id="checkbox1" /></td>
<td>姓名1</td>
<td>羽毛球</td>
<td>111256789</td>
<td>广州</td>
<td>
<input type="button" id="delete" value="删除" />
<input type="button" id="copy" value="复制" />
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox1" /></td>
<td>姓名2</td>
<td>羽毛球</td>
<td>111256789</td>
<td>广州</td>
<td>
<input type="button" id="delete" value="删除" />
<input type="button" id="copy" value="复制" />
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox1" /></td>
<td>姓名3</td>
<td>羽毛球</td>
<td>111256789</td>
<td>广州</td>
<td>
<input type="button" id="delete" value="删除" />
<input type="button" id="copy" value="复制" />
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox1" /></td>
<td>姓名4</td>
<td>羽毛球</td>
<td>111256789</td>
<td>广州</td>
<td><input type="button" id="delete" value="删除" />
<input type="button" id="copy" value="复制" />
</td>
</tr>
</tbody>
</table>`;
//table写入页面
document.body.innerHTML = table;
//获取表格
var table_box = document.getElementById('table_box')
//利用事件委托实现表格的删除、复制、全选、反选
table_box.onclick = function(e) {
e = e || window.event;
var target = e.target || window.srcElement; //兼容写法
var tr = target.parentElement; //【注】获取事件源所在的行
//全选
if(target.id === 'checkbox2'){
var tr = tbody.children;
for(var i = 0;i<tr.length; i++){
if(target.checked == true){
tr[i].children[0].children[0].checked = true;
tr[i].id = 'color'
}
if(target.checked == false){
tr[i].children[0].children[0].checked = false;
tr[i].id = '';
}
}
}
//反选
if(target.id === 'checkbox3'){
//获取tr
var tr = tbody.children;
for(var i = 0;i<tr.length; i++){
//tbody复选框状态
var status = tr[i].children[0].children[0].checked;
if(status == false){
tr[i].children[0].children[0].checked = true;
tr[i].id = 'color';
}
if(status == true){
tr[i].children[0].children[0].checked = false;
tr[i].id = '';
}
}
}
//勾选框
if(target.id == 'checkbox1'){
tr.parentElement.id = 'color'
if(target.checked == false){
tr.parentElement.id = ''
}
}
//点击改变行颜色
if(target.tagName === 'TD'){
if(tr.id == ''){
tr.id = 'color';
tr.children[0].children[0].checked = true;//这里应该会有BUG
return false;
}
tr.id = '';
tr.children[0].children[0].checked = false;
}
//删除行
if(target.id == 'delete') {
//得到tr
var deleteTr = tr.parentElement;
deleteTr.parentElement.removeChild(deleteTr);
}
//复制行
if(target.id == 'copy') {
//得到copy所在的行
var copyTr = tr.parentElement;
//克隆行
var copyRows = copyTr.cloneNode(true)
copyTr.parentElement.appendChild(copyRows);
}
}
}
</script>
</head>
<body>
</body>
</html>