今天周末，有时间把用jQuery写的添加、删除表格数据用javascript来实现.添加数据改写的很顺利，删除表格数据改写时遇到了一点麻烦，最开始生成的数据删除没问题，但是后期添加的数据，在删除时没反应。
查了好多资料，想用js实现jQuery的on()监听方法，结果学艺不精，原理没太弄懂，磕磕绊绊的实现了，效果却不如人意，代码多了很多不说，点击第一下的时候，还不反应，必须点两下才能删除。而且因为冒泡的原因，确认对话框还出现两次。
后来用了阻止冒泡，确认对话框终于只弹出一次了。然后忽然想起了事件代理，于是不把监听放在每个删除超链接上，而是放在tbody上，使用e.target ,效果不错，代码简洁，达到了预期的目的。
该代码实现了以下功能：
1.表格中开始呈现的数据是从数组读取数据生成的；
2.点击“添加数据”按钮，弹出“添加数据”窗口；
3.输入姓名、朝代、事迹，点击“添加”，可在表格后追加一行新的数据；
4.点击“删除”，可以删除该行数据。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态生成表格数据、添加数据、删除数据</title>
<style type="text/css">
.wrap {
width: 800px;
margin: 30px auto 0;
}
a {
text-decoration: none;
color: #fa4500;
}
a:hover {
text-decoration: underline;
}
table {
margin: 1rem auto;
}
table,td,th {
border: 1px solid #ccc;
border-collapse: collapse;
text-align: center;
}
th {
width: 150px;
height: 40px;
background-color: #23C6D9;
color: #fff;
}
.w500{
width: 300px;
}
td {
height: 30px;
color: #333;
}
.mask {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.15);
display: none;
}
.form-item {
height: 100%;
position: relative;
padding-left: 100px;
padding-right: 20px;
margin-bottom: 34px;
line-height: 36px;
}
.form-item>.lb {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100px;
text-align: right;
}
.form-item>.txt {
width: 300px;
height: 32px;
}
.form-add {
position: fixed;
top: 30%;
left: 50%;
margin-left: -197px;
padding-bottom: 20px;
background: #fff;
display: none;
}
.form-add-title {
background-color: #f7f7f7;
border-width: 1px 1px 0 1px;
border-bottom: 0;
margin-bottom: 15px;
position: relative;
}
.form-add-title span {
width: auto;
height: 18px;
font-size: 16px;
font-family: "Microsoft YaHei";
font-weight: bold;
color: rgb(102, 102, 102);
text-indent: 12px;
padding: 8px 0px 10px;
margin-right: 10px;
display: block;
overflow: hidden;
text-align: left;
}
.form-add-title div {
width: 16px;
height: 20px;
position: absolute;
right: 10px;
top: 6px;
font-size: 30px;
line-height: 16px;
cursor: pointer;
}
.form-submit {
text-align: center;
}
.form-submit input {
width: 170px;
height: 32px;
}
</style>
</head>
<body>
<div class="wrap">
<div>
<input type="button" value="添加数据" id="addData" class="btnAdd">
</div>
<table>
<tbody>
<tr>
<th>姓名</th>
<th>朝代</th>
<th class="w500">事迹</th>
<th>操作</th>
</tr>
</tbody>
</table>
</div>
<div id="mask" class="mask"></div>
<!--遮罩层-->
<div id="formAdd" class="form-add">
<div class="form-add-title">
<span>添加数据</span>
<div id="hideFormAdd">x</div>
</div>
<div class="form-item">
<label class="lb" for="txtName">姓名：</label>
<input class="txt" type="text" id="txtName" placeholder="请输入姓名">
</div>
<div class="form-item">
<label class="lb" for="txtDynasty">朝代：</label>
<input class="txt" type="text" id="txtDynasty" value="">
</div>
<div class="form-item">
<label class="lb" for="txtDeeds">事迹：</label>
<input class="txt" type="text" id="txtDeeds" value="">
</div>
<div class="form-submit">
<input type="button" value="添加" id="btnAdd">
</div>
</div>
<script type="text/javascript">
var datas = [{
name: "刘徽",
dynasty: '魏晋',
deeds: '《九章算术注》',
}, {
name: "祖冲之",
dynasty: '南北朝',
deeds: '圆周率',
},
{
name: "秦九韶",
dynasty: '南宋',
deeds: '《数书九章》',
}
];
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) {
//行
var row = document.createElement('tr');
tbody.appendChild(row);
for (var k in datas[i]) {
//列的前3个单元格
var cell = document.createElement('td');
cell.innerHTML = datas[i][k];
row.appendChild(cell);
}
cell2=document.createElement('td');//最后的单元格
cell2.innerHTML="<a href='javascript:;'>删除</a>";
row.appendChild(cell2);
}
//显示隐藏
var addData = document.querySelector('#addData');
var mask = document.querySelector('#mask');
var formAdd = document.querySelector('#formAdd');
var hideFormAdd = document.querySelector('#hideFormAdd');
addData.addEventListener('click', function() {
mask.style.display = 'block';
formAdd.style.display = 'block';
})
hideFormAdd.addEventListener('click', function() {
mask.style.display = 'none';
formAdd.style.display = 'none';
})
//添加操作
var btnAdd = document.querySelector('#btnAdd');
btnAdd.addEventListener('click', function() {
var name = document.querySelector('#txtName').value;
var dynasty = document.querySelector('#txtDynasty').value;
var deeds=document.querySelector('#txtDeeds').value;
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + name + '</td><td>' + dynasty + '</td><td>'+deeds+'</td><td>'+'<a href="javascript:;" >删除</a></td>';
tbody.appendChild(tr);
mask.style.display = 'none';
formAdd.style.display = 'none';
document.querySelector('#txtName').value = '';
document.querySelector('#txtDynasty').value = '';
document.querySelector('#txtDeeds').value = '';
})
//删除操作，利用事件委托原理，监听tbody，触发事件的元素是e.target
tbody.addEventListener('click', function(e) {
var dels = tbody.querySelectorAll('a');
for (let i = 0; i < dels.length; i++) {
if (e.target == dels[i]) {
var flag = confirm("你确定要删除吗?");
var trCur = e.target.parentNode.parentNode;
if (flag) {
tbody.removeChild(trCur);
}
}
}
})
</script>
</body>
</html>