完成购物车商品逐条更新编辑以及逐条删除功能
具体内容介绍如下代码内的注释
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完成购物车的商品逐条删除功能！</title>
</head>
<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;
}
.btn1{
background-color: green;
}
.btn2{
background-color: red;
}
</style>
<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"></td>
<td>华为HUAWEI MateBook 14 全面屏轻薄性能笔记本电脑</td>
<td><button class="btn1">编辑</button> <button class="btn2">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>联想(Lenovo)拯救者Y7000英特尔酷睿i5 15.6英寸游戏笔记本电脑</td>
<td><button class="btn1">编辑</button> <button class="btn2">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>小米 (MI)Ruby 2019款 15.6英寸金属轻薄笔记本电脑</td>
<td><button class="btn1">编辑</button> <button class="btn2">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>Apple Macbook Pro 13.3[带触控栏]深空灰 </td>
<td><button class="btn1">编辑</button> <button class="btn2">删除</button></td>
</tr>
</tbody>
</table>
<button id="del-all" disabled>全部删除</button>
<script>
//获取到全选复选框
var all = document.getElementById('all');
//获取全部商品列表复选框
var checkboxes = document.getElementsByName('user-select');
//获取全部删除按钮
var delbtn = document.getElementById('del-all');
var tbody = document.getElementsByTagName('table')[0].tBodies[0];
//给全选商品复选框,添加input事件,实现全选商品功能
all.addEventListener('input',getAll,false);
// 全选商品事件的触发函数
function getAll() {
console.log(all.checked);
//如果用户点击了全选按钮
if (all.checked === true){
Object.keys(checkboxes).forEach(function (value) {
checkboxes[value].checked = true;
});
//全部删除按钮有效果
delbtn.disabled = false;
}else{
//用户取消全选 ,还原所有行的复选框;
Object.keys(checkboxes).forEach(function (value) {
checkboxes[value].checked = false;
});
//全部删除有效
delbtn.disabled = true;
}
}
//全部删除事件
delbtn.addEventListener('click',delAll,false);
//全部删除事件触发函数
function delAll() {
//获取到tbody
console.log(tbody);
//将tbody 内容设置为空
tbody.innerHTML = '';
//全部删除按钮无效
delbtn.disabled = true;
//全选按钮还原
all.checked = false;
//全选按钮不能选择
all.disabled = true;
//给用户提示商品为空请去添加一些商品
var p = document.createElement('p');
p.style.color = 'red';
p.innerHTML = '购物车已经清空了,亲赶快去逛一逛吧';
document.body.append(p);
}
//实现完成逐条删除功能
//1.获取到删除按钮
var btn2 = document.querySelectorAll('.btn2');
console.log(btn2);
//给删除按钮添加click点击事件
console.log(btn2.length);
for (var i = 0; btn2.length > i; i++ ){
btn2[i].addEventListener('click',del,false);
}
//逐条删除事件函数
function del() {
if (confirm('确定要删除?')){
// ele.parentElement.parentElement;
tbody.removeChild(this.parentElement.parentElement);
}
}
//实现完成逐条更新编辑功能
//1.获取到更新编辑按钮
var btn1 = document.querySelectorAll('.btn1');
console.log(btn1);
//给更新编辑按钮添加click点击事件
console.log(btn1.length);
for (var i = 0; btn1.length > i; i++ ){
btn1[i].addEventListener('click',del1,false);
}
//逐条更新编辑事件函数
function del1() {
// 要编辑的内容位于当前按钮的父元素的前一个兄弟元素
var td = this.parentElement.previousElementSibling;
// 获取原始的内容
var oldContent = td.innerHTML;
// 设置编辑对话框, 确定会返回第二个参数值的内容, 取消会返回null
var newContent = prompt('请输入要更新的内容', oldContent);
console.log(newContent); // 测试
// 如果返回值不等于null, 说明用户点击了确定按钮
if (newContent !== null) {
// 更新内容
td.innerHTML = newContent;
} else {
// 如果返回 null, 什么也不做,返回
return false;
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例