JS实现的淘宝购物车

主要功能为，动态计算价格，移除内容和订单排序功能，先贴一张图！画风比较简陋~用的是JS原生代码写的，所以脚本会比较长！

下面是html结构代码。

 <table border="1" cellspacing="0" cellpadding="0">
        
        <thead>
            <tr >
                <td class="allPrice" colspan= "6">
                    <span>总价：</span><span>0元</span>
                </td>
            </tr>
            <tr>
                <th><label for=""><input type="checkbox"></label></th>
                <th>商品名称</th>
                <th>商品数量<div class="sort"><span>&and;</span><span>&or;</span></div>
                </th>
                <th>商品单价<div class="sort"><span>&and;</span><span>&or;</span></div>
                </th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            
            <tr>
                <td><input type="checkbox" class="remmber" type="checkbox" class="check"></td>
                <td>上衣</td>
                <td>
                    <div class="add">+</div><span>0</span><div class="sub">-</div>
                </td>
                <td>100元</td>
                <td>0元</td>
                <td>移除</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>裤子</td>
                <td>
                    <div class="add">+</div><span>0</span><div class="sub">-</div>
                </td>
                <td>120元</td>
                <td>0元</td>
                <td>移除</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>鞋子</td>
                <td>
                    <div class="add">+</div><span>0</span><div class="sub">-</div>
                </td>
                <td>320元</td>
                <td>0元</td>
                <td>移除</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>卫衣</td>
                <td>
                    <div class="add">+</div><span>0</span><div class="sub">-</div>
                </td>
                <td>230元</td>
                <td>0元</td>
                <td>移除</td>
            </tr>
            
            <tr>
                    <td><input type="checkbox"></td>
                    <td>凑单零食</td>
                    <td>
                        <div class="add">+</div><span>0</span><div class="sub">-</div>
                    </td>
                    <td>6元</td>
                    <td>0元</td>
                    <td>移除</td>
                </tr>
        </tbody>
    </table>

接下来是CSS样式代码！

<style>
        * { 
   
            margin: 0;
            padding: 0;
        }

        table { 
   
            width: 500px;
            margin: 50px auto 0px;
            border-collapse:collapse
        }

        thead { 
   }

        tbody { 
   
            text-align: center;

        }

        tbody>tr { 
   
            height: 20px
        }

        .sort { 
   
            float: right;
        }

        .sort>span { 
   
            cursor: pointer;
            display: block;
            height: 10px;
            width: 10px;
            font-size: 10px;
            line-height: 10px;
            font-weight: bold;
        }

        .sort>span:hover { 
   
            color: blue;
        }

        tbody>tr>td:nth-child(3) { 
   
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom:none;
            border-left: none;
            /* border-top:none; */
            border-right:none;
        }
        tbody>tr:nth-child(1)>td:nth-child(3){ 
   
            border-top: none;
        }
        .add,.sub { 
   
            cursor: pointer;
            /* border:1px solid #000; */
            width: 16px;
            height: 16px;
            line-height: 16px;
            font-size: 20px;
        }

        input[type='checkbox'] { 
   
            width: 15px;
            height: 15px;
            background-color: #fff;
            -webkit-appearance: none;
            border: 1px solid #c9c9c9;
            border-radius: 2px;
            outline: none;
            display: block;
            margin: 0px auto;
            text-align: center;
            line-height: 15px;
        }

        input[type=checkbox]:checked:after { 
   
            content: '\2714';
            font-size: 10px;
            display: inline-block;
            color: red;
            
        }
        .allPrice{ 
   
            text-align: center;
        }
    </style>

最后是JS脚本代码啦！

 <script>
        class Table{ 
   
            constructor() { 
   
                this.allPrice = 0;
                this.add = document.getElementsByClassName("add")
                this.sub = document.getElementsByClassName("sub")
                this.allPriceDom = document.querySelectorAll(".allPrice>span:nth-child(2)")[0]
                this.checkDom = document.querySelectorAll("input[type=checkbox]")
                this.tbody = document.querySelector("tbody")
                this.sort = document.querySelector(".sort").children
                this.addCount()
                this.subCount()
                this.checkEvent()
                this.bindEvent()
            }
            bindEvent(){ 
   
                this.bindRemove()
                this.bindSort()
            }
            addCount() { 
                 
                for (let i = 0; i < this.add.length; i++) { 
   
                    this.add[i].onclick = () => { 
                         
                        this.add[i].nextElementSibling.innerHTML = parseInt(this.add[i].nextElementSibling.innerHTML)+1
                        this.add[i].parentElement.nextElementSibling.nextElementSibling.innerHTML = this.add[i].nextElementSibling.innerHTML * parseInt(this.add[i].parentElement.nextElementSibling.innerHTML) +"元";
                        if(this.add[i].parentElement.previousElementSibling.previousElementSibling.firstElementChild.checked == true){ 
   
                            this.countAllPrice()
                        }
                    }
                }
            }
            subCount(){ 
   
                for (let i = 0; i < this.add.length; i++) { 
   
                    this.sub[i].onclick = () => { 
        
                        if(parseInt(this.sub[i].previousElementSibling.innerHTML) <=0){ 
   
                            return                        
                        }                 
                        this.sub[i].previousElementSibling.innerHTML = parseInt(this.sub[i].previousElementSibling.innerHTML)-1
                        this.sub[i].parentElement.nextElementSibling.nextElementSibling.innerHTML = this.sub[i].previousElementSibling.innerHTML * parseInt(this.sub[i].parentElement.nextElementSibling.innerHTML) +"元"
                        if(this.add[i].parentElement.previousElementSibling.previousElementSibling.firstElementChild.checked == true){ 
   
                            this.countAllPrice()
                        }
                    }
                }
            }
            checkEvent(){ 
   
                for(let i = 0;i<this.checkDom.length;i++){ 
   
                    this.checkDom[i].onclick = ()=>{ 
   
                        this.isCheck(i)
                    }
                }
            }
            isCheck(i){ 
   
                if(this.checkDom[i].checked == true && i==0){ 
   
                    for(var j = 1;j<this.checkDom.length;j++){ 
   
                        this.checkDom[j].checked = true;
                    }
                }
                if(this.checkDom[i].checked == false && i==0){ 
   
                    for(var j = 1;j<this.checkDom.length;j++){ 
   
                        this.checkDom[j].checked = false;
                    }
                }
                this.countAllPrice()
            }
            countAllPrice(){ 
   
                this.allPrice = 0;
                for(var i =1;i<this.checkDom.length;i++){ 
   
                    if(this.checkDom[i].checked == true){ 
   
                        this.allPrice = this.allPrice+parseInt(this.checkDom[i].parentElement.parentElement.children[4].innerHTML)
                        
                        // console.log(this.allPrice)
                    }
                }
                this.allPriceDom.innerHTML = this.allPrice + "元"
            }
            bindRemove(){ 
   
                this.tbody.onclick = (e)=>{ 
   
                    if(e.target == e.target.parentElement.lastElementChild && e.target.innerHTML == "移除"){ 
   
                        e.target.parentElement.remove()
                        e.target.parentElement.firstElementChild.firstElementChild.checked = false
                        this.countAllPrice()
                        // console.log(e.target.parentElement.firstElementChild.firstElementChild)
                    }
                }
            }
            bindSort(){ 
   
                for(let i =0;i<this.sort.length;i++){ 
   
                    this.sort[i].onclick=()=>{ 
   
                        this.sortEvent(i)
                    }
                }
            }
            sortEvent(i){ 
   
                if(i==0){ 
   
                    var arr = Array.from(document.querySelectorAll(".add+span"))
                    arr.sort(function(a,b){ 
   
                        return a.innerHTML-b.innerHTML;
                    });
                    arr.forEach((value,index,arr) => { 
   
                        this.tbody.insertBefore(value.parentElement.parentElement,this.tbody.children[0])
                    });

                    console.log(arr)
                }else{ 
   
                    var arr = Array.from(document.querySelectorAll(".add+span"))
                    arr.sort(function(a,b){ 
   
                        return b.innerHTML-a.innerHTML;
                    });
                    arr.forEach((value,index,arr) => { 
   
                        this.tbody.insertBefore(value.parentElement.parentElement,this.tbody.children[0])
                    });
                    console.log(arr)

                }
            }
        }
        var table = new Table()
    </script>