原生js实现购物车的功能？

<div class="box">
        商品名称：<input id="goods" type="text" placeholder="  请输入商品名称">
        <br><br>
        商品价格：<input id="price" type="number" placeholder="  请输入商品价格">
        <br><br>
        商品数量：<input id="count" type="number" placeholder="  请输入商品数量">
        <br><br>
        <button id="add">添加商品</button>
        <table cellspacing='0' cellpadding='1px' border="1px">
            <thead>
                <tr>
                    <th>
                        全选<input class="all" type="checkbox">
                    </th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>
                        操作
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input class="xuanze" type="checkbox"></td>
                    <td>iphone11 pro</td>
                    <td>8399</td>
                    <td>
                        <button class="many" onclick="jian(this)">-</button>
                        <input class="num" value="1" type="text" class="how" >
                        <button class="many" onclick="jia(this)">+</button>
                    </td>

                    <td><button onclick="ele(this)">删除</button></td>
                </tr>
                <tr>
                    <td><input class="xuanze" type="checkbox"></td>
                    <td>iphone6</td>
                    <td>1699</td>
                    <td>
                        <button class="many" onclick="jian(this)">-</button>
                        <input class="num" value="1" type="text" class="how">
                        <button class="many" onclick="jia(this)">+</button>
                    </td>

                    <td><button onclick="ele(this)">删除</button></td>
                </tr>
                <tr>
                    <!-- <td>
                        <input type="text">
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td> -->
                </tr>
            </tbody>
        </table>
        <button class="xuan">选中删除</button>总价格：<span id="total">0</span>元
    </div>

js代码块

      // 获取元素
        var xuan = document.getElementsByClassName('xuan')[0];
        var xuanze = document.getElementsByClassName('xuanze');
        var all = document.getElementsByClassName('all')[0];
        var input = document.getElementsByTagName('input');

        var add = document.getElementById('add');

        var tbody = document.getElementsByTagName('tbody')[0];
        var tr = tbody.getElementsByTagName('tr');

        var goods = document.getElementById('goods');
        var price = document.getElementById('price');
        var count = document.getElementById('count');

        var total = document.getElementById('total');

        //单行删除
        function ele(del) {
            del.parentNode.parentNode.remove();
            changecolor()
            sum();
        }

        //选中删除
        xuan.onclick = function () {
            for (var i = 0; i < xuanze.length; i++) {
                if (xuanze[i].checked) {
                    xuanze[i].parentNode.parentNode.remove();
                    i--;
                }

            }
            changecolor()
            sum();

        }
        //全选
        all.onclick = function () {
            for (var i = 0; i < input.length; i++) {
                input[i].checked = all.checked;
            }
            changecolor();
            sum();
        }

        //添加
        add.onclick = function () {
            var goodsv = goods.value;
            var pricev = price.value; 
            var countv = count.value;
            //1创建
            var tr = document.createElement('tr');
            //2内容
            tr.innerHTML = '<td>\
                        <input class="xuanze" type="checkbox">\
                    </td>\
                    <td>' + goodsv + '</td>\
                    <td>' + pricev + '</td>\
                    <td><button class="many"  onclick ="jian(this)">-</button>\
                        <input class="num" value="1" type="text" class = "how" >\
                        <button  onclick = "jia(this)" class="many">+</button></td>\
                        <td><button onclick="ele(this)">删除</button></td>'

            //追加
            tbody.appendChild(tr);
            changecolor();
            sum();
        }

        //隔行变色
        function changecolor() {
            var tr = tbody.getElementsByTagName('tr');
            for (var i = 0; i < tr.length; i++) {
                if (i % 2 == 0) {
                    tr[i].style.backgroundColor = '#ccc';
                } else {
                    tr[i].style.backgroundColor = '#eee';
                }
            }
        }

      // 加功能
        function jia(add) {
            var countnum = add.previousElementSibling.value;
            countnum++;
            add.previousElementSibling.value = countnum;
            sum();
        }

      //减功能
        function jian(cut) {
            var countnum = cut.nextElementSibling.value;
            countnum--;
            if (countnum < 1) {
                alert('不能再少了');
                return;
            }
            cut.nextElementSibling.value = countnum;
            sum();
        }


        //计算求和
        function sum() {
            //总价格 = 数量*单价   全部加起来

            var num = document.getElementsByClassName('num');
            var he = 0;

            for (var i = 0; i < num.length; i++) {
                var prices = num[i].parentNode.previousElementSibling.innerHTML;

                he += prices * num[i].value;
               
            }
 
            total.innerHTML = he;
        }
        sum();

css代码块

   * {
            margin: 0;
            padding: 0;
        }

        td {
            text-align: center;
        }

        .box {
            width: 600px;
            height: 500px;
            margin: 0 auto;

            padding: 20px;
            margin-top: 50px;
        }

        table {
            width: 500px;
            min-height: 40px;
            border: 2px solid black;
            margin: 20px 0;
        }
     .many {
            width: 20px;
        }
        table tr td  button input{
            width: 20px;
        }
        .box table tr td input{
            width: 20px;
        }