收藏
批改状态：未批改
老师批语：
用老师讲的方法理解后自己再写编辑和删除函数：
<!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 id="car">
<caption>购物车</caption>
<thead>
<tr>
<th style="width: 30px;"><input type="checkbox" id="all"></th>
<th style="width: 300px">商品</th>
<th style="width: 59px;">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td id="main">华为HUAWEI MateBook 14 全面屏轻薄性能笔记本电脑</td>
<td><button onclick="edit(this)">编辑</button> <button id="del-1" onclick="del(this)">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td id="main">联想(Lenovo)拯救者Y7000英特尔酷睿i5 15.6英寸游戏笔记本电脑</td>
<td><button onclick="edit(this)">编辑</button> <button id="del-2" onclick="del(this)">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td id="main">小米 (MI)Ruby 2019款 15.6英寸金属轻薄笔记本电脑</td>
<td><button onclick="edit(this)">编辑</button> <button id="del-3" onclick="del(this)">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td id="main">Apple Macbook Pro 13.3[带触控栏]深空灰 </td>
<td><button onclick="edit(this)">编辑</button> <button id="del-4" onclick="del(this)">删除</button></td>
</tr>
</tbody>
</table>
<button id="del-all" disabled>全部删除</button>
<script>
// 获取表格购物车
var car = document.getElementById('car');
// 获取tbody
var tbody = document.getElementsByTagName('table')[0].tBodies[0];
// 获取全选的复选框
var all = document.getElementById('all');
// 获取每个商品的复选框
var checkboxes = document.getElementsByName('user-select');
// 获取全部删除按钮
var btn = document.getElementById('del-all');
// 给全选复选框, 通过input事件, 添加全选功能
all.addEventListener('input', getAll, false);
// 全选事件触发函数
function getAll() {
// 用if语句判断是否勾选了全选的复选框
if (all.checked === true){
// 获取所有被选中的复选框，并将其设置为选中状态
Object.keys(checkboxes).forEach(function (key) {
checkboxes[key].checked = true
});
// 全部删除按钮有效
btn.disabled = false;
}else { //用户取消了全选
//还原所有行的复选框
Object.keys(checkboxes).forEach(function (key) {
checkboxes[key].checked =false
});
//全部删除按钮无效
btn.disabled = true;
}
}
// 全部删除事件
btn.addEventListener('click',delAll,false);
// 全部删除事件触发函数
function delAll() {
// 用if语句弹窗提示用户是否全部删除
if (confirm('是否全部删除')) {
//将tbody内容置空
tbody.innerHTML = '';
// 全部删除按钮失效
btn.disabled = true;
// 全选按钮还原
all.checked = false;
// 购物车清空后给用户提示，在页面中添加<p>标签显示文本内容
// 创建p标签定义
var p = document.createElement('p');
//给<p>添加样式
p.style.color = 'red';
// 给<p>添加文本内容
p.innerText = '亲，快去逛逛看下有没有更喜欢的商品！';
// 在页面<body>中输出<p>标签
document.body.appendChild(p);
}
}
//5.13自己写的方法
// // 获取商品信息
// var commodity1 = car.tBodies[0].rows[0];//表格第二行
// var commodity2 = car.tBodies[0].rows[1];//表格第三行
// var commodity3 = car.tBodies[0].rows[2];//表格第四行
// var commodity4 = car.tBodies[0].rows[3];//表格第四行
// // 获取商品删除按钮
// var btn1 = document.getElementById('del-1');//第一行内的删除按钮
// var btn2 = document.getElementById('del-2');//第二行内的删除按钮
// var btn3 = document.getElementById('del-3');//第三行内的删除按钮
// var btn4 = document.getElementById('del-4');//第四行内的删除按钮
//
// // 删除第一行商品
// btn1.addEventListener('click', del1, false);
// // 删除第一行商品函数
// function del1() {
// // 用if语句提示用户是否删除商品
// if (confirm('是否确定删除该商品')){
// commodity1.innerHTML = '';
// }
// }
//
// // 删除第二行商品
// btn2.addEventListener('click', del2, false);
// // 删除第一行商品函数
// function del2() {
// // 用if语句提示用户是否删除商品
// if (confirm('是否确定删除该商品')){
// commodity2.innerHTML = '';
// }
// }
//
// // 删除第三行商品
// btn3.addEventListener('click', del3, false);
// // 删除第一行商品函数
// function del3() {
// // 用if语句提示用户是否删除商品
// if (confirm('是否确定删除该商品')){
// commodity3.innerHTML = '';
// }
// }
//
// // 删除第四行商品
// btn4.addEventListener('click', del4, false);
// // 删除第一行商品函数
// function del4() {
// // 用if语句提示用户是否删除商品
// if (confirm('是否确定删除该商品')){
// commodity4.innerHTML = '';
// }
// }
//老师写的方法
// 获取网页中的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>点击 "运行实例" 按钮查看在线实例
实际运行效果：
我自己对JavaScript的单线程、任务队列、事件循环、同步和异步的理解：
JavaScript语言是单线程的。
单线程：
单线程意味着任务是队列形式执行，前一个任务结束后才会执行下一个的任务。为了不会同时执行相反的操作，所以JavaScript使用单线程的方式执行任务。
任务队列：
在单线程中执行任务，如果前一个人任务耗时比较长，后面的任务就要一直等待，直至前面执行比较慢的任务结束后才能执行。正因为这样，任务队列就是把执行时间较长的任务先挂起，放在任务队列中执行，让处在主线程中的任务先执行。
事件循环和回调函数：
主线程从任务队列中读取事件，将原本处在任务队里中的事件从新放到主线程中执行。或者将函数放在任务队列中，主线程获取动作任务时，需要执行动作函数，再循环在任务队列中查找对应函数来执行动作。
同步：
在主线程上排队执行的任务，只有前面一个任务执行完毕，才能执行后面的任务。
异步：
不进入主线程，而是进入任务队列的任务，只有任务队列通知主线程某个异步任务可以执行了，该任务才会进入主线程执行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
