用JS实现表格的增删功能，添加或删除一列：
实现结果如下图：
1）添加行；
2）删除行；
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
a{
text-decoration: none;
}
.one{
margin: 0 auto;
width: 1000px;
}
.btns {
margin-bottom: 5px;
}
.btn {
display: inline-block;
padding: .3em 1.2em;
border-radius: 3px;
background-color: teal;
color: #fff;
cursor :pointer;
}
table.table {
box-sizing: border-box;
width: 100%;
border-collapse: collapse;
}
table.table td ,
table.table th {
border: 1px solid #ccc;
line-height: 2em;
text-align: center;
}
.none {
display: none;
}
</style>
</head>
<body>
<div class="one">
<div class="btns">
<div class="btn" id="btn_add">添加</div>
<div class="btn">批量导入</div>
<div class="btn">批量删除</div>
</div>
<table class="table">
<thead>
<tr>
<th width="80px">编号</th>
<th width="100px">班级</th>
<th width="220px">姓名</th>
<th width="80px">性别</th>
<th width="80px">年龄</th>
<th>邮箱</th>
<th>手机</th>
<th width="100px">操作</th>
</tr>
</thead>
<tbody>
<tr class="none" >
<td><input type="checkbox"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<a class="btn_del" href="javascript:void(0)">删除</a>
<a class="btn_upd" href="javascript:void(0)">修改</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//获取Id为btn_add的元素，并将其赋值给btn_add
var btn_add = document.getElementById("btn_add");
//获取标签名字为tbody的第一个标签，并将其赋值给tbody
var tbody = document.getElementsByTagName("tbody")[0];
// 为删除按钮绑定事件处理函数
tbody.onclick = function(event){
//新建触发事件=触发事件的Dom元素本身（触发事件即点击事件）
var target = event.target;
//如果触发事件的节点名字===a（如果点击a标签）
if(target.nodeName === "A"){
//如果触发事件的class名字===btn_del（如果点击class名字===btn_del的a标签）
if(target.className === "btn_del"){
//移除tody下的孩子（删除点击事件的父节点的父节点，即删除点击的a标签的父节点（td标签)的父节点（tr标签）
tbody.removeChild(target.parentNode.parentNode)
}
//如果触发事件的class名字===btn_upd（如果点击class名字===btn_upd的a标签）
if(target.className === "btn_upd"){
alert("修改");
}
}
}
// 为添加按钮绑定事件处理函数
btn_add.onclick = function(event){
// 产生一个tr，新添加行等于复制隐藏行
var newTr = tbody.firstElementChild.cloneNode(true);
//新添加行的第2+1列的值为0-1之间的随机小数
newTr.children[2].innerHTML = "<strong>"+Math.random()+"</strong>";
//新添加行的class名字为0-1之间的随机小数
newTr.className = Math.random();
// 将一个tr追加到tbody
tbody.appendChild(newTr);
};
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/lidyfamily/p/11448103.html
时间： 2024-08-05 12:42:28