简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 完善购物车的编辑和删除功能;说一下自己对单线程、任务队列、事件循环、同步和异步的理解（用老师讲的方法理解后自己再写编辑和删除函数；用自己理解的话说一下单线程、任务队列、事件循环、同步和异步）2019年5月14日20点
Blogger Information
Blog 49
fans 1
comment 0
visits 45192
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
完善购物车的编辑和删除功能;说一下自己对单线程、任务队列、事件循环、同步和异步的理解（用老师讲的方法理解后自己再写编辑和删除函数；用自己理解的话说一下单线程、任务队列、事件循环、同步和异步）2019年5月14日20点
Nick的博客
Original
954 people have browsed it

用老师讲的方法理解后自己再写编辑和删除函数：

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实际运行效果：

购物车编辑效果图.png


我自己对JavaScript的单线程、任务队列、事件循环、同步和异步的理解：


JavaScript语言是单线程的。


单线程：

单线程意味着任务是队列形式执行，前一个任务结束后才会执行下一个的任务。为了不会同时执行相反的操作，所以JavaScript使用单线程的方式执行任务。



任务队列：

在单线程中执行任务，如果前一个人任务耗时比较长，后面的任务就要一直等待，直至前面执行比较慢的任务结束后才能执行。正因为这样，任务队列就是把执行时间较长的任务先挂起，放在任务队列中执行，让处在主线程中的任务先执行。


事件循环和回调函数：

主线程从任务队列中读取事件，将原本处在任务队里中的事件从新放到主线程中执行。或者将函数放在任务队列中，主线程获取动作任务时，需要执行动作函数，再循环在任务队列中查找对应函数来执行动作。


同步：

在主线程上排队执行的任务，只有前面一个任务执行完毕，才能执行后面的任务。


异步：

不进入主线程，而是进入任务队列的任务，只有任务队列通知主线程某个异步任务可以执行了，该任务才会进入主线程执行。


Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！