动态创建具有删除行按钮的table表格
分类：实例代码
动态创建具有删除行按钮的table表格属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了动态创建table表格的效果。
并且在每一行的后面就有删除按钮，点击可以删除当前行。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
window.onload = function() {
var oTab = document.getElementById('tab');
var oTbody = oTab.tBodies[0];
var data = [{
'num': '01',
'name': 'div教程',
'sex': '男',
'age': 29
}, {
'num': '02',
'name': 'css教程',
'sex': '29',
'age': 19
}, {
'num': '03',
'name': '前端教程网',
'sex': '男',
'age': 23
}, {
'num': '04',
'name': 'www.pipipi.net',
'sex': '男',
'age': 24
}, {
'num': '05',
'name': 'js教程',
'sex': '男',
'age': 28
}, ];
for (var index = 0; index < data.length; index++) {
var oTr = document.createElement('tr');
var oTd = document.createElement('td');
oTd.innerHTML = data[index].num;
oTr.appendChild(oTd);
oTd = document.createElement('td');
oTd.innerHTML = data[index].name;
oTr.appendChild(oTd);
oTd = document.createElement('td');
oTd.innerHTML = data[index].sex;
oTr.appendChild(oTd);
oTd = document.createElement('td');
oTd.innerHTML = data[index].age;
oTr.appendChild(oTd);
var A = document.createElement('a');
A.href = 'javascript:;';
A.innerHTML = '删除';
oTd = document.createElement('td');
oTd.appendChild(A);
oTr.appendChild(oTd);
oTbody.appendChild(oTr);
A.onclick = function() {
oTbody.removeChild(this.parentNode.parentNode);
for (var index = 0; index < oTbody.rows.length; index++) {
if (index % 2 == 0) {
oTbody.rows[index].style.background = '#ccc'
} else {
oTbody.rows[index].style.background = 'white';
}
}
}
}
for (var index = 0; index < oTbody.rows.length; index++) {
if (index % 2 == 0) {
oTbody.rows[index].style.background = '#ccc'
} else {
oTbody.rows[index].style.background = 'white';
}
}
}
</script>
</head>
<body>
<table id="tab" width="60%" border="1">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
上面的代码实现了我们的要求，更多内容可以参阅相关阅读。
相关阅读：
（1）.document.createElement()参阅document.createElement()一章节。
（2）.innerHTML参阅innerHTML一章节。
（3）.appendChild()参阅appendChild()一章节。
（4）.removeChild()参阅JavaScript removeChild()一章节。
（5）.parentNode参阅parentNode一章节。
（6）.rows参阅表格table rows一章节。
动态创建具有删除行按钮的table表格，这样的场景在实际项目中还是用的比较多的，关于动态创建具有删除行按钮的table表格就介绍到这了。