完善购物车的删除与编辑功能
<!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 delanniu = document.getElementsByName('del'); //console.log(delanniu); // 全部商品列表复选框 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); var tbody = document.getElementsByTagName('table')[0].tBodies[0]; function del(ele) { tbody.removeChild(ele.parentElement.parentElement); } function edit(ele) { var td = ele.parentElement.previousElementSibling; var oldContent = td.innerHTML; var newContent = prompt('请输入',oldContent); if(newContent!==null){ td.innerHTML=newContent; }else{ return 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); } } // 作业: 逐个删除功能, 如何添加与测试? </script> </body> </html>
谈一下单线程,任务队列与事件循环, 同步与异步的理解
单线程:如果因为I/O事务慢,就会导致程序堵塞,其他所有的任务都必须等待,直到它完成之后它们才能依次执行。javascript语言就是单线程。
任务分为同步任务跟异步任务。同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。异步任务:不进入主线程、而进入任务队列,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。只要主线程空了,就会去读取任务队列