实现购物车的删除与编辑功能
方法一：添加name属性来获取按钮
收藏
<!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"></td>
<td>华为HUAWEI MateBook 14 全面屏轻薄性能笔记本电脑</td>
<td><button name="edit">编辑</button> <button name="del-one">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>联想(Lenovo)拯救者Y7000英特尔酷睿i5 15.6英寸游戏笔记本电脑</td>
<td><button name="edit">编辑</button> <button name="del-one">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>小米 (MI)Ruby 2019款 15.6英寸金属轻薄笔记本电脑</td>
<td><button name="edit">编辑</button> <button name="del-one">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>Apple Macbook Pro 13.3[带触控栏]深空灰 </td>
<td><button name="edit">编辑</button> <button name="del-one">删除</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');
// 给全选复选框, 通过input事件, 添加全选功能
all.addEventListener('click',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 delOne=document.getElementsByName('del-one');
//给单个删除按钮添加点击事件
Object.keys(delOne).forEach(function (key) {
delOne[key].addEventListener('click',del,false);
});
//单个删除事件触发函数
function del() {
// console.log('删除一条');
if(confirm('是否删除该信息？')){
this.parentNode.parentElement.innerHTML='';
}
// 三元运算符
// return confirm('是否删除该信息？')?this.parentNode.parentElement.innerHTML='':false;
}
//获取单个编辑按钮
var edits=document.getElementsByName('edit');
//给单个编辑按钮添加事件
Object.keys(edits).forEach(function (key) {
edits[key].addEventListener('click',edit,false);
});
//单个编辑事件触发函数
function edit() {
var td=this.parentElement.previousElementSibling;
var oldText=td.innerText;
var newText=prompt('是否编辑该信息？',oldText);
if(newText !==null && newText !==''){
td.innerText=newText;
}else if(newText===''){
var fText=prompt('请重新输入！');
td.innerText=fText;
}else{
//为null时
return false;
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
方法二：直接在按钮中添加onclick点击事件
<!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"></td>
<td>华为HUAWEI MateBook 14 全面屏轻薄性能笔记本电脑</td>
<td><button onclick="edit(this)">编辑</button> <button onclick="del(this)">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>联想(Lenovo)拯救者Y7000英特尔酷睿i5 15.6英寸游戏笔记本电脑</td>
<td><button onclick="edit(this)">编辑</button> <button onclick="del(this)">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>小米 (MI)Ruby 2019款 15.6英寸金属轻薄笔记本电脑</td>
<td><button onclick="edit(this)">编辑</button> <button onclick="del(this)">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>Apple Macbook Pro 13.3[带触控栏]深空灰 </td>
<td><button onclick="edit(this)">编辑</button> <button onclick="del(this)">删除</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');
// 给全选复选框, 通过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 tbody = document.getElementsByTagName('table')[0].tBodies[0];
// 删除操作
function del(ele) {
if (confirm('是否删除?')) {
// ele.parentElement: <td>
// ele.parentElement.parentElement: <tr>
tbody.removeChild(ele.parentElement.parentElement);
}
}
// 编辑操作
function edit(ele) {
// 要编辑的内容位于当前按钮的父元素的前一个兄弟元素
var td = ele.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>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
