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

之前我也用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){//不能将商品个数减少至0num=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+'￥');})});})})