实现了 表格的全部删除 单行删除 单行编辑功能
主要使用到了给元素添加监听事件的方法
addEventListener 和 传统的添加事件方法区别在于 前者可以在同一个元素添加多个监听事件
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表格操作</title>
<style>
table,tr,td{
border: 1px solid grey;
text-align: center;
border-collapse: collapse;
}
thead{background-color: lightseagreen;}
tr td:nth-of-type(2){width: 300px;}
tr td:nth-of-type(3){width: 100px;}
tr td:nth-of-type(4){width: 100px;}
</style>
</head>
<body>
<table id="wrap">
<caption>表格标题</caption>
<thead>
<tr>
<td><input type="checkbox" id="all"></td>
<td>产品名称</td>
<td>***价格</td>
<td>操作方式</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>mac book pro 15.5</td>
<td>19000</td>
<td><button name="btn">编辑</button><button name="btnl">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>huawei book pro 全面屏</td>
<td>8800</td>
<td><button name="btn">编辑</button><button name="btnl">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>小米游戏本pro 15.6</td>
<td>8999</td>
<td><button name="btn">编辑</button><button name="btnl">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>Thankpad xx**</td>
<td>9500</td>
<td><button name="btn">编辑</button><button name="btnl">删除</button></td>
</tr>
</tbody>
</table>
<button id="del-all" disabled>全部删除</button>
<script>
// 获取表格
var table = document.getElementById('wrap');
// 获取全选按钮
var all = document.getElementById('all');
// 获取每行的复选框
var userSelect = document.getElementsByName('user-select');
// 获取全部删除按钮
var delall = document.getElementById('del-all');
// 获取单行删除按钮
var btnl = document.getElementsByName('btnl');
// 获取单行编辑按钮
var btn = document.getElementsByName('btn');
all.addEventListener('input',function () {
if (all.checked === true){
// 判断表格内是否有行 如没有 全选复选框不让选
if (userSelect.length === 0){
all.checked = false;
}
// 第一种执行方式
// Object.keys(userSelect).forEach(function (value) {
// console.log(userSelect[value]);
// userSelect[value].checked = true;
// });
// 第二种执行方式
userSelect.forEach(function (value) {
// console.log(value);
value.checked = true;
});
// 设置全部删除按钮为可点击状态
delall.disabled = false;
} else {
// 第一种执行方式
// Object.keys(userSelect).forEach(function (value) {
// console.log(userSelect[value]);
// userSelect[value].checked = false;
// });
// 第二种执行方式
userSelect.forEach(function (value) {
// console.log(value);
value.checked = false;
});
// 设置全部删除按钮为禁止状态
delall.disabled = true;
}
},false);
// 全部删除按钮事件
delall.addEventListener('click',function () {
table.tBodies[0].innerHTML = null;
delall.disabled = true;
all.checked = false;
},false);
// 操作方式 单行操作 删除
Object.keys(btnl).forEach(function (value) {
// console.log(value);
btnl[value].addEventListener('click',function () {
this.parentNode.parentElement.remove();
prompt('请输入需要修改的内容');
},false);
});
// 操作方式 单行操作 编辑
Object.keys(btn).forEach(function (value) {
btn[value].addEventListener('click',function () {
var input = prompt('请输入需要修改的内容');
if (input !== null){
if (input.length !== 0){
this.parentNode.parentElement.children[1].innerHTML = input;
}
}
},false);
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例