题解 | #购物车#

function add(items) {let tbody = document.querySelector("tbody");

        // 生成与商品数量对应的行
        for (let i = 0; i < items.length; i++) {
            let tr = document.createElement("tr");
            for (let key in items[i]) {
                let td = document.createElement("td");
                td.innerHTML = items[i][key];
                if (key == "price") {
                    td.innerHTML = Number(items[i][key]).toFixed(2);
                }
                tr.appendChild(td);
            }
            let del = document.createElement("td");
            del.innerHTML = `<a href="javascript:void(0);">删除</a>`;
            tr.appendChild(del);
            tbody.appendChild(tr);
        }

        bind();
    }

    function bind() {
        let tbody = document.querySelector("tbody");
        let tfoot = document.querySelector("tfoot");
        let btnDelete = tbody.querySelectorAll("a");
        function update() {
            // 同步更新总计里的数据
            let rows = tbody.querySelectorAll("tr");
            let totalPrice = 0;
            for (let i = 0; i < rows.length; i++) {
                totalPrice += Number(rows[i].querySelectorAll("td")[1].innerHTML);
            }
            tfoot.querySelector("td").innerHTML = `${totalPrice.toFixed(2)}(${rows.length}件商品)`;
        }
        update();
        for (let i = 0; i < btnDelete.length; i++) {
            btnDelete[i].addEventListener("click", function () {
			 // 每次删除行后，重新计算总计
                document.querySelector("tbody").removeChild(this.parentNode.parentNode);
                update();
            })
        }
    }