练习牛客网笔试题--前端js--56-购物车_前端购物车笔试-CSDN博客

本文链接：https://blog.csdn.net/Lsvmmer/article/details/117122466

练习牛客网笔试题--前端js--56-购物车

// 题目描述

// HTML模块为一个简化版的购物车，tbody为商品列表，tfoot为统计信息，系统会随机在列表中生成一些初始商品信息

// 1、请完成add函数，在列表后面显示items商品信息。参数items为{name: String, price: Number}组成的数组

// 2、请完成bind函数，点击每一行的删除按钮(包括通过add增加的行)，从列表中删除对应行

// 3、请注意同步更新统计信息，价格保留小数点后两位

// 4、列表和统计信息格式请与HTML示例保持一致

// 5、不要直接手动修改HTML中的代码

// 6、不要使用第三方库

1.自己的练习

<body>
    <table id="jsTrolley">
        <thead>
            <tr>
                <th>名称</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>产品1</td>
                <td>10.00</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
            <tr>
                <td>产品2</td>
                <td>30.20</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
            <tr>
                <td>产品3</td>
                <td>20.50</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总计</th>
                <td colspan="2">60.70(3件商品)</td>
            </tr>
        </tfoot>
    </table>
</body>

    <style>
        body,
        html {
            padding: 0;
            margin: 0;
            font-size: 14px;
            color: #000000;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        thead {
            background: #3d444c;
            color: #ffffff;
        }

        td,
        th {
            border: 1px solid #e1e1e1;
            padding: 0;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>

<script>
        function add(items) {
            var str = '';
            var tbody = document.querySelector('tbody');
            for (var i = 0; i < items.length; i++) {
                str += `<tr><td>` + items[i].name + `</td><td>` 
                    + items[i].price.toFixed(2) 
                    + `</td><td><a href="javascript:void(0);">删除</a></td></tr>`;
            }
            tbody.innerHTML += str;
            count();
        }

        function bind() {
            var tbody = document.querySelector('tbody');
            var del = tbody.querySelectorAll('a');
            tbody.addEventListener('click', function (event) {
                var el = event.target;
                if (el.tagName.toLowerCase() === 'a') {
                    tbody.removeChild(el.parentNode.parentNode);
                    count();
                }
            });
        }

        function count() {
            var tbody = document.querySelector('tbody');
            var tr = tbody.querySelectorAll('tr');
            var tfoot = document.querySelector('tfoot');
            var td = tfoot.querySelector('td');
            var sum = 0;
            for (var i = 0; i < tr.length; i++) {
                sum += parseFloat(tr[i].children[1].innerHTML);
            }
            td.innerHTML = sum.toFixed(2) + '(' + tr.length + '件商品)';
        }
</script>