jQuery写简单购物车

     我们经常会在网上看到一些购物车，当你点击下面的物品，在购物车内会出现物品的名称，单价，数量，增减，删除......

之前我也用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+'￥');
                   })
        });
        })
        })