提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
js+jqueryhtml+cssjs+jquery
所需函数：
function cal（）：计算购物车里的价格，积分，数量等；
$(".add").click(function(){})：添加商品数量；
$(".sub").click(function(){})：减少商品数量；
$("#add").click(function(){})：添加新商品；
$(".del").click(function(){})：删除商品；
$("#control").click(function(){})：商品全选；
<script>function cal(){//设置三个全局变量来接受总数量，总积分，总价格var allnum = 0;var allsorce = 0;var allprice = 0;//通过类选择器拿到每一个商品数量框$(".num").each(function(i,v){var num = $(v).val();var price = $(v).parent().prev().html();var all = parseInt(num)*parseInt(price);$(v).parent().next().html(all);allnum+=parseInt(num);allprice+=parseInt(all)var jf = $(v).parent().prev().prev().html();var alljf = parseInt(num)*parseInt(jf);allsorce+=parseInt(alljf);$("#allnum").html(allnum);$("#alljf").html(allsorce);$("#allmoney").html(allprice);});}$(function(){cal();$(".add").click(function(){var n = $(this).prev().val();$(this).prev().val(parseInt(n)+1);cal();});$(".sub").click(function(){var n = $(this).next().val();if(n>1){$$(this).next().val(parseInt(n)-1);cal();}else{var bet = confirm("要删除吗？")if(bet){$(this).parents("tr").remove();cal();}}});$("#add").click(function(){var $newNode=$("table tr:eq(2)").clone(true);$("table tr:last").before($newNode);cal();});$(".del").click(function(){var bet = confirm("要删除吗？")if(bet){$(this).parents("tr").remove();cal();}});var flag = $("#control").val();$("#control").click(function(){if(flag){$("input[type='checkbox']").attr("checked","true");flag=false;}else{$("input[type='checkbox']").removeAttr("checked");flag=true;}});});</script>
html+css
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0px;padding: 0px;}table{width: 800px;margin: 0px auto;font-size: 12px;text-align: center;}td{padding: 10px;background-color: #E2F2FF;}.td_2 div{float: left;}.td_2 div:last-of-type{width: 260px;margin-left:5px;}.td_2 p{line-height: 20px;text-align: left;}.num{border: 1px solid powderblue;width: 20px;height: 20px;text-align: center;}.sub,.add{width: 20px;height: 20px;}</style></head><body><input type="button" οnclick="cal();" value="aa"/><table><tr><td><input type="checkbox" id="control"/>全选</td><td>店铺宝贝</td><td>获积分</td><td>单价(元)</td><td>数量</td><td>小计(元)</td><td>操作 <input type="button" id="add" value="添加"/></td></tr><tr id="pro1"><td class="td_1"><input type="checkbox" /></td><td class="td_2"><div><img src="images/taobao_cart_01.jpg"></div><div><p><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a></p><p>颜色：棕色 尺码：37</p><p>保障:<img src="images/taobao_icon_01.jpg"> </p></div></td><td class="td_3">5</td><td class="td_4">138</td><td class="td_5"><input type="button" value="-" class="sub"/><input type="text" value="1" class="num" /><input type="button" value="+" class="add"/></td><td class="td_6"></td><td class="td_7"><a href="#" class="del">删除</a></td></tr><tr id="pro2"><td class="td_1"><input type="checkbox" /></td><td class="td_2"><div><img src="images/taobao_cart_02.jpg"></div><div><p><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a></p><p>保障:<img src="images/taobao_icon_01.jpg"> </p></div></td><td class="td_3">12</td><td class="td_4">265</td><td class="td_5"><input type="button" value="-" class="sub"/><input type="text" value="1" class="num" /><input type="button" value="+" class="add"/></td><td class="td_6"></td><td class="td_7"><a href="#" class="del">删除</a></td></tr><tr id="pro3"><td class="td_1"><input type="checkbox" /></td><td class="td_2"><div><img src="images/taobao_cart_03.jpg"></div><div><p><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a></p><p>保障:<img src="images/taobao_icon_01.jpg"><img src="images/taobao_icon_02.jpg"></p></div></td><td class="td_3">3</td><td class="td_4">85</td><td class="td_5"><input type="button" value="-" class="sub"/><input type="text" value="2" class="num" /><input type="button" value="+" class="add"/></td><td class="td_6"></td><td class="td_7"><a href="#" class="del">删除</a></td></tr><tr id="pro4"><td class="td_1"><input type="checkbox" /></td><td class="td_2"><div><img src="images/taobao_cart_04.jpg"></div><div><p><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a></p><p>保障:<img src="images/taobao_icon_01.jpg"><img src="images/taobao_icon_02.jpg"></p></div></td><td class="td_3">12</td><td class="td_4">12</td><td class="td_5"><input type="button" value="-" class="sub"/><input type="text" value="5" class="num" /><input type="button" value="+" class="add"/></td><td class="td_6"></td><td class="td_7"><a href="#" class="del">删除</a></td></tr><tr id="all"><td colspan="7">总数量:<span id="allnum"></span>总积分:<span id="alljf"></span>总金额:<span id="allmoney"></span></td></tr></table></body></html>
效果图：
