题解 | JS79 购物车

function add(items) {
    let table = document.querySelector("tbody");
    let str = "";
    for (let i = 0; i < items.length; ++i) {
        let item = items[i];
        // 坑点，price要写toFixed(2)否则样例通过不了
        str += `
            <tr>
                <td>${item.name}</td>
                <td>${item.price.toFixed(2)}</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
        `;
    }
    table.innerHTML += str;
    // 更新视图
    this.refresh();
}

function bind() {
    let table = document.querySelectorAll("tbody > tr");
    // 遍历tr项
    for (let i = 0; i < table.length; ++i) {
        let that = this
        // 得到删除按钮元素
        let deldom = table[i].querySelectorAll("td")[2];
        deldom.addEventListener('click', function (e) {
            table[i].remove()
            // 更新视图
            that.refresh();
        });
    }
}

function refresh() {
    let table = document.querySelectorAll("tbody > tr");
    let sum = 0;
    for (let i = 0; i < table.length; ++i) {
        // 获取物品的价格
        let cur = table[i].querySelectorAll("td")[1].innerText;
        sum += +cur;
    }
    let count = document.querySelector("tfoot td");
    count.innerText = `${sum.toFixed(2)}(${table.length}件商品)`
    // 坑点，因为会新增元素，所以需要刷新监听列表
    this.bind()
}