收藏
批改状态：未批改
老师批语：
完成购物车的商品逐条删除功能，用if语句实现商品单行删除功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格操作</title>
<style>
table,tr,td{
border:solid gray;
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="cart">
<caption>购物车</caption>
<thead>
<tr>
<td><input type="checkbox" id="all"></td>
<td>产品名称</td>
<td>操作方式</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>MacBookPro</td>
<td><button onclick="edit(this)">编辑</button><button onclick="del(this)">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>MateBookXPro</td>
<td><button onclick="edit(this)">编辑</button><button onclick="del(this)">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>DellG7</td>
<td><button onclick="edit(this)">编辑</button><button onclick="del(this)">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>AlWA51M</td>
<td><button onclick="edit(this)">编辑</button><button onclick="del(this)">删除</button></td>
</tr>
</tbody>
</table>
<button id="del-All" disabled>全部删除</button>
<script>
// 获取表格
var table = document.getElementById('cart');
// 获取tbody
var tbody = document.getElementsByTagName('table')[0].tBodies[0];
// 获取全选按钮
var all = document.getElementById('all');
// 获取每行的复选框
var user = document.getElementsByName('user-select');
// 获取全部删除按钮
var btn = document.getElementById('del-All');
// 给全选复选框, 通过input事件, 添加全选功能
all.addEventListener('input',getAll,false);
function getAll(){
// 用if语句判断是否勾选了全选的复选框
if(all.checked === true){
// 获取所有被选中的复选框，并将其设置为选中状态
user.forEach(function (value) {
value.checked = true;
});
// 设置全部删除按钮为可点击状态
btn.disabled = false;
}else { // 用户取消了全选按钮
// 还原所有行的复选框
user.forEach(function(value){
value.checked = false;
});
// 设置全部删除按钮为禁止状态
btn.disabled = true;
}
}
// 全部删除事件
btn.addEventListener('click',delAll,false);
// 全部删除事件触发函数
function delAll(){
if (confirm('是否全部删除')){
// 获取tbody
var tbody = document.getElementsByTagName('table')[0].tBodies[0];
// 将tbody 内容置空却可
tbody.innerHTML = '';
// 全部删除按钮无效
btn.disabled = true;
// 全选按钮还原
all.checked = false;
// 可选操作, 给用户一个提示,让用户再添加一些商品到购物车,增加成交率
var p = document.createElement('p');
p.style.color = 'red';
p.innerText = '购物车啥也木有了, 赶紧添加一些吧!';
document.body.appendChild(p);
}
}
// 获取网页中的tbody
var tbody = document.getElementsByTagName('table')[0].tBodies[0];
// 删除单个商品的按钮操作函数
function del(ele) {
if (confirm('是否确认删除')){
// ele.parentElement: <td> //button的父级是<td>
// ele.parentElement.parentElement: <tr> //button父级的父级是<tr>
// 删除tbody中的<tr>
tbody.removeChild(ele.parentElement.parentElement);
}
}
// 编辑按钮函数
function edit(ele) {
// 获取编辑内容，位置在当前按钮的父级元素的前一个兄弟元素
var td = ele.parentElement.previousElementSibling;
// 获取原始的内容
var oldContent = td.innerHTML;
// 设置编辑对话框，点击确定会返回新的内容，取消会返回null
var newContent = prompt('请输入要更新的内容',oldContent);
//用if语句判断，如果返回值不等于null,说明用户点击了确认按钮
if (newContent !== null) { //!== 不等于
td.innerHTML = newContent //返回为true时，更新内容
}else {
return false; //否则返回null,原内容不改变
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
