原生js写简易购物车功能

<table>
        <thead>
            <tr>
                <td class="choose_all">
                    <input type="checkbox">
                    <span>全选</span>
                </td>
                <td>商品</td>
                <td>单价</td>
                <td>商品数量</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>

        </tbody>

    </table>
    <div>
        <a href="javascript:" class="del_selected">删除所选商品</a>
        <a href="javascript:" class="del_all">清理购物车</a>
        <p>
            已经选中<span class="total">0</span>件商品；总价：¥<span class="final_price">0</span>
        </p>
        <button>去结算</button>

    </div>

 let data = [{
            id: 1001,
            pic: 'images/01.jpg',
            name: '牛奶',
            unitPrice: 30,
            num: 1,
            sumPrice: 30
        }, {
            id: 1002,
            pic: 'images/01.jpg',
            name: '牛奶',
            unitPrice: 50,
            num: 1,
            sumPrice: 50
        }, {
            id: 1003,
            pic: 'images/01.jpg',
            name: '牛奶',
            unitPrice: 20,
            num: 1,
            sumPrice: 20
        }, {
            id: 1004,
            pic: 'images/01.jpg',
            name: '牛奶',
            unitPrice: 40,
            num: 1,
            sumPrice: 40
        }]

        // 渲染
        let tbody = document.querySelector('tbody')

        function render() {
            // 渲染需先清除以往内容
            tbody.innerHTML = ''
            for (let i = 0; i < data.length; i++) {
                let tr = document.createElement('tr')
                data[i].sumPrice = `${data[i].num*data[i].unitPrice}`

                tr.innerHTML = `<td><input type="checkbox" class="choose"}></td>
                <td><img src=${data[i].pic} alt="">
                    <h5>${data[i].name}</h5>
                </td>
                <td>¥<span class="univalent">${data[i].unitPrice}</span></td>
                <td><button class="sub" disabled>-</button>
                    <input type="number" class="nums" value=${data[i].num}></input>
                    <button class="add">+</button></td>
                <td>¥<span class="sum_price">${data[i].sumPrice}</span></td>
                <td><a href="javascript:" class="del" id=${i}>删除</a></td>`
                tbody.appendChild(tr)
            }
        }
        render()
            // 实现全选，取消的选择功能
        let chooseAll = document.querySelector('.choose_all input')
        let chooseText = document.querySelector('.choose_all span')
            // 全选和取消按钮的设定函数
        function setChoose(x) {
            // 由于节点有删减和增加，所以需要重复获取choose
            let choose = document.querySelectorAll('.choose')
            let clas = x.className
            if (clas === 'choose') {
                for (let k = 0; k < choose.length; k++) {
                    if (choose[k].checked === false) {
                        chooseAll.checked = false
                        break
                    }
                    chooseAll.checked = true
                }
            } else {
                // chooseAll和choose保持checked状态一致
                for (let i = 0; i < choose.length; i++) {
                    choose[i].checked = chooseAll.checked
                }
            }
            // 根据全选按钮状态决定文字
            chooseText.innerHTML = chooseAll.checked ? '取消' : '全选'
        }
        // 全选按钮监听
        chooseAll.addEventListener('click', function(e) {
                setChoose(e.target)
                getSum()
            })
            // 通过事件委托的方式实现，以tr为基本的父级元素
        let tr = document.querySelectorAll('tbody tr')
        for (let i = 0; i < tr.length; i++) {
            let t = tr[i]
            t.addEventListener('click', function(e) {
                let target = e.target
                let clas = target.className
                let num = t.querySelector('.nums')
                let sub = t.querySelector('.sub')
                let unitPrice = t.querySelector('.univalent')
                let sumPrice = t.querySelector('.sum_price')
                switch (clas) {
                    case 'choose':
                        setChoose(target)
                        break
                    case 'sub':
                        num.value--

                            break
                    case 'add':
                        num.value++
                            sub.disabled = false

                        break
                    case 'nums':
                        // 失去焦点确认输入值
                        target.addEventListener('blur', function() {
                                num.value <= 1 ? sub.disabled = true : sub.disabled = false
                                    // 监听的事件为click，此处输入最好单独计算，否则容易出现错误
                                sumPrice.innerHTML = (num.value * unitPrice.innerHTML).toFixed(2)
                                    // 计算总价
                                getSum()
                            })
                            // 回车键确认输入值
                        target.addEventListener('keyup', function(e) {
                            if (e.key === 'Enter') this.blur()
                        })

                        break
                    case 'del':
                        if (confirm('确定删除所选商品吗？')) {
                            tbody.removeChild(t)
                        }
                }
                // 每次点击tr,都要进行一次计算
                // 控制减法键的可操作性
                num.value <= 1 ? sub.disabled = true : sub.disabled = false
                    // 计算小结
                sumPrice.innerHTML = (num.value * unitPrice.innerHTML).toFixed(2)
                    // 计算总价
                getSum()
            })
        }

        let total = document.querySelector('.total')
        let finalPrice = document.querySelector('.final_price')
            // 计算总件数和总价的函数
        function getSum() {
            let choose = document.querySelectorAll('.choose')
            let num = 0
            let sum = 0
            for (let i = 0; i < choose.length; i++) {
                if (choose[i].checked) {
                    let tr = choose[i].parentNode.parentNode
                    num += parseInt(tr.querySelector('.nums').value)
                    sum += parseFloat(tr.querySelector('.sum_price').innerHTML)
                }
            }
            total.innerHTML = num
            finalPrice.innerHTML = sum.toFixed(2)
        }
        // 删除所选商品
        let delSel = document.querySelector('.del_selected')
        delSel.addEventListener('click', function() {
                if (confirm('确定删除所选商品吗？')) {
                    let choose = document.querySelectorAll('.choose')
                    for (let i = 0; i < choose.length; i++) {
                        if (choose[i].checked) {
                            tbody.removeChild(choose[i].parentNode.parentNode)
                        }
                    }
                    chooseAll.checked = false
                    chooseText.innerHTML = '全选'
                        // 如果内容为空，则全选按钮不可用 
                    if (tbody.innerHTML === '') {
                        chooseAll.disabled = true
                    }
                    getSum()
                }
            })
            // 清理购物车
        let delAll = document.querySelector('.del_all')
        delAll.addEventListener('click', function() {
            if (confirm('确认清除购物车中所有商品吗？')) {
                tbody.innerHTML = ''
                getSum()
                chooseAll.disabled = true
            }
        })

原生js购物车