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>