练习：购物车

最新推荐文章于 2024-06-10 22:18:41 发布

小高三岁半

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量73

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/G_0402/article/details/129938009

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <td><input type="checkbox" id="all"></td>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>键盘</td>
                <td>500</td>
                <td>
                    <button class="minus cal">-</button>
                    <input type="text" value="1">
                    <button class="add cal">+</button>
                </td>
                <td>500</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>鼠标</td>
                <td>100</td>
                <td>
                    <button class="minus cal">-</button>
                    <input type="text" value="1">
                    <button class="add cal">+</button>
                </td>
                <td>100</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td colspan="3">总计</td>
                <td colspan="3" id="sumTotal"></td>
            </tr>
        </tbody>
    </table>
    <script>
     <script>
        //计算加减
        let _cals = document.querySelectorAll(".cal");
        _cals.forEach(_cal => {
            _cal.onclick = function () {
                //获取操作符
                let opera = this.innerHTML;
                //获取数量
                let _input = this.parentNode.children[1];
                //减1
                if (_input.value * 1 <= 1 && opera == "-") {
                    return;
                }
                //执行加减
                let num = eval(_input.value * 1 + opera + 1);
                _input.value = num;
                //计算小计
                //单价
                let price = this.parentNode.previousElementSibling.innerText * 1;
                let total = price * num; //小计
                this.parentNode.nextElementSibling.innerText = total;

                //重新计算总计
                sumTotal();
            }
        })

        //全选
        let _all = document.querySelector("#all"); //全选框
        //所有反选框
        let _chboxes = document.querySelectorAll("input[type=checkbox]:not(#all)")
        _all.onchange = function () {
            _chboxes.forEach(_chbox => {
                _chbox.checked = this.checked;
            })
            //重新计算总计
            sumTotal();
        }

        //反选
        _chboxes.forEach(_chbox => {
            _chbox.onchange = function () {
                //获取带checked属性的所有input框
                let _checkedboxes = document.querySelectorAll("input:checked:not(#all)");
                _all.checked = _checkedboxes.length == _chboxes.length;
                //重新计算总计
                sumTotal();
            }
        })

        //计算总计
        let _sumTotal = document.querySelector("#sumTotal");
        function sumTotal() {
            //获取带有checked属性的小计
            let _checkedboxes = document.querySelectorAll("input:checked:not(#all)");

            let sumTotal = 0; //总计
            _checkedboxes.forEach(_checkedbox => {
                sumTotal += _checkedbox.parentNode.parentNode.children[4].innerText * 1
            })
            // 存放总计
            _sumTotal.innerText = sumTotal;
        }

        //删除
        let _dels = document.querySelectorAll(".del");
        _dels.forEach(_del => {
           _del.onclick=function(){
            if (confirm("确认删除吗?")) {
                _del.parentNode.parentNode.remove();
                //重新计算总计
                sumTotal();
            }
           }

        })
    </script>
</body>

</html>