题解 | #购物车#

购物车

https://www.nowcoder.com/practice/3b4a342351ce483e813e5588446fc1f8

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <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>
</head>

<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>
<script type="text/javascript">
    // 填写JavaScript
    function add(items) {
        let tb = document.querySelector('tbody');
        let tf = document.querySelector('tfoot').querySelector('td');
        let p = parseFloat(tf.innerText.substring(0, tf.innerText.indexOf('(')));
        for(let it of items){
            p += it.price
            let tr = document.createElement('tr');
            tr.innerHTML = `<td>${it.name}</td><td>${it.price.toFixed(2)}</td><td><a href="javascript:void(0);">删除</a></td>`
            tb.appendChild(tr);
        }
        tf.innerText = `${p.toFixed(2)}(${tb.childElementCount}件商品)`
    }
    function bind() {
        let tb = document.querySelector('tbody');
        tb.addEventListener('click', function (event) {
            if(event.target.tagName === 'A') {
                let tr = event.target.parentElement.parentElement;
                let tf = document.querySelector('tfoot').querySelector('td');
                let price = parseFloat(event.target.parentElement.previousElementSibling.innerText);
                let p = parseFloat(tf.innerText.substring(0, tf.innerText.indexOf('(')))
                tb.removeChild(tr);
                tf.innerText = `${(p - price).toFixed(2)}(${tb.childElementCount}件商品)`
            }
        })
    }
    bind()

    function f() {
        clear();
        var items = [{name: '1', price: 1.11}];
        add(items);
        var result = checkSame(items);
        result = result && checkTotal();
        return result;

        function checkSame(items) {
            var table = document.getElementById('jsTrolley');
            var tbody = table.getElementsByTagName('tbody')[0];
            var tr = [].slice.call(tbody.getElementsByTagName('tr'), 0);
            var result = true;
            tr.forEach(function (tr, index) {
                var td = [].slice.call(tr.getElementsByTagName('td'), 0);
                result = result && td[0].innerHTML.trim() === items[index].name && td[1].innerHTML.trim() === items[index].price.toFixed(2) && td[2].innerHTML.trim() === '<a href="javascript:void(0);">删除</a>';
            });
            return result;
        }

        function checkTotal() {
            var table = document.getElementById('jsTrolley');
            var tbody = table.getElementsByTagName('tbody')[0];
            var tfoot = table.getElementsByTagName('tfoot')[0];
            var tr = [].slice.call(tbody.getElementsByTagName('tr'), 0);
            var total = 0;
            tr.forEach(function (tr) {
                total += +(tr.getElementsByTagName('td')[1].innerHTML.trim());
            });
            var content = tfoot.getElementsByTagName('td')[0].innerHTML.trim();
            var result = content === total.toFixed(2) + '(' + tr.length + '件商品)';
            return result;
        }

        function clear() {
            document.body.innerHTML = '<table id="jsTrolley"><thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead><tbody></tbody><tfoot><tr><th>总计</th><td colspan="2">0(0件商品)</td></tr></tfoot></table>';
        }
    }
    console.log(f())
</script>
</body>

</html>