我們經常會在網上看到一些購物車，當你點選下面的物品，在購物車內會出現物品的名稱，單價，數量，增減，刪除......

之前我也用js寫過購物車，今天用jQuery又寫了一次。對比中你會發現，其實就是jquery購物車就是用底層封裝好的東西去寫，寫起來更加的簡單，提高了我們的工作效率。

購物車的基本樣子，有點醜湊合看吧：

1.html程式碼：

<div class="block">
    <table class="tablist">
        <tr>
            <td colspan="6">
            <button id="btn">增加商品</button>
            </td>
        </tr>
        <tr>
            <td>序號</td>
            <td>名稱</td>
            <td>單價</td>
            <td>數量</td>
            <td>總價</td>
            <td>操作</td>
        </tr>
    </table>
    <table class="bookinfo">
        <tr>
            <td title="100">c高階程式設計</td>
            <td title="70">c++高階程式設計</td>
            <td title="102">c#高階程式設計</td>
            <td title="200">java高階程式設計</td>
            <td title="250">php高階程式設計</td>
        </tr>
        <tr>
            <td title="129">javascript高階程式設計</td>
            <td title="70">jquery高階程式設計</td>
            <td title="78">vue高階程式設計</td>
            <td title="100">angular高階程式設計</td>
            <td title="22">bootstrap高階詳解</td>
        </tr>
        <tr>
            <td title="100">c高階程式設計</td>
            <td title="70">c++高階程式設計</td>
            <td title="102">c#高階程式設計</td>
            <td title="200">java高階程式設計</td>
            <td title="250">php高階程式設計</td>
        </tr>
    </table>
 

2.css程式碼：造一下購物車的基本樣式

<style>
        .block {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: #dedef8;
            border: 1px solid silver;
            margin: 0 auto;
        }
        .tablist {
            width: 500px;
            border-collapse: collapse;
            background-color: #eefeed;
        }
        .tablist td {
            width: 83px;
            border: 1px solid silver;
            text-align: center;
            line-height: 30px;
            white-space: nowrap;
        }
        .tablist td span {
            display: inline-block;
            width: 15px;
            color: blue;
        }
        .tablist td input {
            width: 40px;
            text-align: center;
        }
        .bookinfo {
            position: absolute;
            bottom: 0;
            width: 500px;
            border-collapse: collapse;
            display: none;
        }
        .bookinfo td {
            border: 1px solid silver;
            text-align: center;
            font-size: 15px;
            padding: 5px 5px;
            background-color: #fff9c0;
        }
        #btn{
            width: 497px;
            padding: 5px;
            background-color: #fae2f4;
            /*border-color: #a78fcf;*/
            /*border-radius: 10px;*/
            border-style: hidden;
        }
    </style>
 

3.js程式碼：具體的步驟在程式碼中，我都有詳細備註。

        var num=0;
        var trinfo=null;//用於存值
        var isclick=true;
        $(function(){
            $("#btn").click(function () {
            //1.點選增加商品按鈕，如果isclick為true,則新增一行
                if(isclick==false)return;
                var str=$("<tr class='trlist'>" +
                        "<td class='numlst'></td>" +
                        "<td class='name'></td>" +
                        "<td class='price'></td>" +
                        "<td class='number'></td>" +
                        "<td class='tottal'></td>" +
                        "<td><button class='delete'>刪除</button></td>" +
                        "</tr>");
                $(".tablist").append(str);
                num++;//2.定義變數，每加一行序號加1
                $(".numlst").last().html(num<10?"0"+num:num);
                $(".trlist").click(function(){
                    //3.點選trlist商品區域出現
                    $(".bookinfo").css("display","block");
                    trinfo =$(this);//存trlist物件，方便下面用物件
                });
                $(".delete").each(function(){
                    $(this).click(function(){
                        $(this).parents(".trlist").remove();
                        return false;
                    })
                });
                isclick=false;
            });
            //4.給行上面新增商品的單價，名稱等
            $(".bookinfo td").each(function(){
                //點選某個商品，商品區消失，商品屬性新增到行上
               $(this).click(function(){
                   $(this).parents(".bookinfo").css("display","none");
                   isclick=true;
                   //獲取商品的名稱，價格
                   var name=$(this).html();
                   var price=$(this).attr("title");
                   //將商品名稱和價格寫入行中
                   trinfo.find(".name").html(name);
                   trinfo.find(".price").html(price+'￥');
                   trinfo.find(".tottal").html(price+'￥');
                   //遍歷行，當行中的元素不為一，只點擊name可以顯示商品區
                   trinfo.find("td").each(function(index){
                       $(this).click(function(){
                           if(index!=1){
                               return false;
                           }
                       })
                   });
                   //5.如果數量區已經有文字框了則不新增，
                   if(!$(".number").last().html().length){
                       var restd=$("<span class='btnl'>-</span><input class='num' type='text' value='1'/><span class='btnr'>+</span>");
                       //給每個數量區域最後一個追加restd，防止錯行
                       $(".number").last().append(restd);
                       //在新增按鈕事件時，先清除所有事件
                       $(".btnl").unbind();
                       //點選按鈕進行數量的加減
                       $(".btnl").click(function(){
                           //獲取文字框的值
                           var num=$(this).next().val();
                           num--;
                           if(num<=0){//不能將商品個數減少至0
                               num=1;
                           }
                           $(this).next().val(num);//將減少後的值放入文字框
                           var price=parseFloat($(this).parent().prev().html());
                           //計算總價格
                           $(this).parent().next().html(num*price+"￥");
                           return false;
                       })
                       //跟左邊“-”的方法一樣
                       $(".btnr").unbind();
                       $(".btnr").click(function(){
                           var num=$(this).prev().val();
                           num++;
                           $(this).prev().val(num);
                           var price=parseFloat($(this).parent().prev().html());
                           $(this).parent().next().html(num*price+"￥");
                           return false;
                       })
                   };
                   //6.點選文字框，選中文字
                   $(".num").click(function(){
                       $(this).select();
                       return false;
                   }).keydown(function(e){
                       //規定非數字不能輸入
                       if(isNaN(e.key)|| e.key==" ")
                           return false;

                   }).keyup(function(e){
                       //當按鍵擡起，計算總價
                       var n=$(this).val();
                       var price=parseFloat($(this).parent().prev().html());
                       $(this).parent().next().html(n*price+'￥');
                   })
        });
        })
        })