今天间利用今天的周末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>