5月13日作业完成购物车的商品全部删除功能！

主要涉及知识点总结:
//给全选商品复选框,添加input事件,实现全选商品功能
all.addEventListener('input',getAll,false);
Object.keys(checkboxes).forEach(function (value) {
checkboxes[value].checked = true;
});
//Object.keys遍历
相关内容知识以如下代码内的为准
实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完成购物车的商品逐条删除功能！</title>
</head>
<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;
    }

    .btn1{
        background-color: green;
    }
    .btn2{
        background-color: red;
    }
</style>
<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 class="btn1">编辑</button> <button class="btn2">删除</button></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="user-select"></td>
        <td>联想(Lenovo)拯救者Y7000英特尔酷睿i5 15.6英寸游戏笔记本电脑</td>
        <td><button class="btn1">编辑</button> <button class="btn2">删除</button></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="user-select"></td>
        <td>小米 (MI)Ruby 2019款 15.6英寸金属轻薄笔记本电脑</td>
        <td><button class="btn1">编辑</button> <button class="btn2">删除</button></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="user-select"></td>
        <td>Apple Macbook Pro 13.3[带触控栏]深空灰 </td>
        <td><button class="btn1">编辑</button> <button class="btn2">删除</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 (value) {
                checkboxes[value].checked = true;
            });
            //全部删除按钮有效果
            delbtn.disabled = false;
        }else{
            //用户取消全选 ,还原所有行的复选框;
            Object.keys(checkboxes).forEach(function (value) {
                checkboxes[value].checked = false;
            });
            //全部删除有效
            delbtn.disabled = true;
        }
    }
    //全部删除事件
    delbtn.addEventListener('click',delAll,false);

    //全部删除事件触发函数
    function delAll() {
        //获取到tbody
        var tbody = document.getElementsByTagName('table')[0].tBodies[0];
        console.log(tbody);
        //将tbody 内容设置为空
        tbody.innerHTML = '';
        //全部删除按钮无效
        delbtn.disabled = true;
        //全选按钮还原
        all.checked = false;
        //全选按钮不能选择
        all.disabled = true;

        //给用户提示商品为空请去添加一些商品
        var p = document.createElement('p');
        p.style.color = 'red';
        p.innerHTML = '购物车已经清空了,亲赶快去逛一逛吧';
        document.body.append(p);
    }
</script>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5月13日作业 完成购物车的商品全部删除功能！

相关文章
