博客列表 >2019.5.14作业

2019.5.14作业

关超的博客
关超的博客原创
2019年05月15日 10:28:02707浏览

完善购物车的删除与编辑功能

<!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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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语言就是单线程。

任务分为同步任务跟异步任务。同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。异步任务:不进入主线程、而进入任务队列,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。只要主线程空了,就会去读取任务队列

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议