完成购物车的商品逐条删除功能
本例利用addEventListener方法，监听复选框上的change事件，选中后表格中的“删除”按钮亮起，变成可用。再利用addEventListener方法监听按钮的click事件，对选中的行进行删除。
// 作业: 逐个删除功能, 如何添加与测试?
var i;
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change',function ( ) {
if (this.checked === true) {
allitem[this.value].disabled = false; //当选中复选框时，高亮删除按钮
} else {
allitem[this.value].disabled = true; //未选中时，删除按钮变灰
}
}, false);
}
var j;
for (j = 0;j < allitem.length; j++) {
allitem[j].addEventListener('click',function ( ) {
if (confirm("确定删除？")){
this.parentNode.parentNode.remove(); //删除当前行
}
var k;
for (k = 0; k < checkboxes.length; k++) {
checkboxes[k].value = k;
}
},false);
}
完整代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小案例: 多选或全选的功能实现</title>
<style>
/*表格与单元素添加边框*/
table, th, td {
border: 1px solid black;
}
/*设置表格样式, 折叠边框线并设置宽度*/
table {
border-collapse: collapse;
width: 600px;
}
/*设置标题行背景*/
table thead tr:first-of-type {
background-color: lightblue;
}
/*选择每一行的第一列*/
table tr td:first-of-type {
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>购物车</caption>
<thead>
<tr>
<th style="width: 30px;"><input type="checkbox" id="all"></th>
<th>商品</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="user-select" value="0"></td>
<td>华为HUAWEI MateBook 14 全面屏轻薄性能笔记本电脑</td>
<td><button>编辑</button> <button disabled name="item-del">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select" value="1"></td>
<td>联想(Lenovo)拯救者Y7000英特尔酷睿i5 15.6英寸游戏笔记本电脑</td>
<td><button>编辑</button> <button disabled name="item-del">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select" value="2"></td>
<td>小米 (MI)Ruby 2019款 15.6英寸金属轻薄笔记本电脑</td>
<td><button>编辑</button> <button disabled name="item-del">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select" value="3"></td>
<td>Apple Macbook Pro 13.3[带触控栏]深空灰 </td>
<td><button>编辑</button> <button disabled name="item-del">删除</button></td>
</tr>
</tbody>
</table>
<button id="del-all" disabled>全部删除</button>
<script>
// 获取元素
// 全选复选框
var allitem = document.getElementsByName('item-del');
var all = document.getElementById('all');
// 全部商品列表复选框
var checkboxes = document.getElementsByName('user-select');
// 全部删除按钮
var delBtn = document.getElementById('del-all');
// 给全选复选框, 通过input事件, 添加全选功能
all.addEventListener('input', getAll, false);
// 全选事件的触发函数
function getAll() {
// 测试
console.log(all.checked);
// 如果用户点击了全选
if (all.checked === true) {
// 获取所有被选中的复选框, 并将其设置为选中状态
Object.keys(checkboxes).forEach(function (key) {
checkboxes[key].checked = true;
});
// 全部删除按钮有效
delBtn.disabled = false;
} else { // 用户取消了全选
// 还原所有行的复选框
Object.keys(checkboxes).forEach(function (key) {
checkboxes[key].checked = false;
});
// 全部删除按钮无效
delBtn.disabled = true;
}
}
// 全部删除事件
delBtn.addEventListener('click', delAll, false);
// 全部删除事件触发函数
function delAll() {
if (confirm('是否全部删除?')) {
// 获取tbody
var tbody = document.getElementsByTagName('table')[0].tBodies[0];
// 将tbody 内容置空却可
tbody.innerHTML = '';
// 全部删除按钮无效
delBtn.disabled = true;
// 全选按钮还原
all.checked = false;
// 可选操作, 给用户一个提示,让用户再添加一些商品到购物车,增加成交率
var p = document.createElement('p');
p.style.color = 'red';
p.innerText = '购物车啥也木有了, 赶紧添加一些吧!';
document.body.appendChild(p);
}
}
// 作业: 逐个删除功能, 如何添加与测试?
var i;
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change',function ( ) {
if (this.checked === true) {
allitem[this.value].disabled = false;
} else {
allitem[this.value].disabled = true;
}
}, false);
}
var j;
for (j = 0;j < allitem.length; j++) {
allitem[j].addEventListener('click',function ( ) {
if (confirm("确定删除？")){
this.parentNode.parentNode.remove();
}
var k;
for (k = 0; k < checkboxes.length; k++) {
checkboxes[k].value = k;
}
},false);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
代码思路
1.获取name为user-select的input集合，利用循环对所有的复选框进行监听。
1.给每个input标签设置value属性，当选中复选框时触发change事件，获取到当前复选框的value值。
2.根据value值确定该复选框对应行的删除按钮，设置disabled=false使其高亮可用，取消复选框时恢复不可用。
3.点击删除按钮触发click事件，删除当前行，删除前弹出确认框。
4.删除一行后，利用循环对剩余的input的value属性进行更新，避免每一行的删除按钮定位出错。