大佬教程收集整理的这篇文章主要介绍了JQuery 实现 购物车页面 实现简单功能，（包括计算，删除），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
效果图：
源代码：
<!DOCTYPE html> <html>
<head> <Meta charset="UTF-8"> <title>淘宝购物车页面</title> </head>
<!--样式的设置-->
<style type="text/css">
body { margin: 0px; padding: 0px; font-size: 12px; line-height: 20px; color: #333; } ul, li { list-style: none; margin: 0px; padding: 0px; } a { color: #1965h3; text-decoration: none; } a:hover { color: #cd590c; text-decoration: underline; } img { border: 0px; vertical-align: middle; } #header { height: 40px; margin: 10px auto 10px auto; width: 800px; clear: both; } #nav { margin: 10px auto 10px auto; width: 800px; clear: both; } #navlist { width: 800px; margin: 0px auto 0px auto; height: 23px; } #navlist li { float: left; height: 23px; line-height: 26px; } .navlist_red_left { BACkground-image: url(img/register_bg.gif); BACkground-repeat: no-repeat; BACkground-position: -12px -92px; width: 3px; } .navlist_red { BACkground-color: #ff6600; text-align: center; font-size: 14px; font-weight: bold; color: #FFF; width: 130px; } .navlist_red_arrow { BACkground-color: #ff6600; BACkground-image: url(img/register_bg.gif); BACkground-repeat: no-repeat; BACkground-position: 0px 0px; width: 13px; } .navlist_gray { BACkground-color: #e4e4e4; text-align: center; font-size: 14px; font-weight: bold; width: 150px; } .navlist_gray_arrow { BACkground-color: #e4e4e4; BACkground-image: url(img/register_bg.gif); BACkground-repeat: no-repeat; BACkground-position: 0px 0px; width: 13px; } .navlist_gray_right { BACkground-image: url(img/register_bg.gif); BACkground-repeat: no-repeat; BACkground-position: -12px -138px; width: 3px; } #content { width: 800px; margin: 10px auto 5px auto; clear: both; } .title_1 { text-align: center; width: 50px; } .title_2 { text-align: center; } .title_3 { text-align: center; width: 80px; } .title_4 { text-align: center; width: 80px; } .title_5 { text-align: center; width: 100px; } .title_6 { text-align: center; width: 80px; } .title_7 { text-align: center; width: 60px; } .line { BACkground-color: #a7cbff; height: 3px; } .shopInfo { padding-left: 10px; height: 35px; vertical-align: bottom; } .num_input { border: solid 1px #666; width: 25px; height: 15px; text-align: center; } .td_1, .td_2, .td_3, .td_4, .td_5, .td_6, .td_7, .td_8 { BACkground-color: #e2f2ff; border-bottom: solid 1px #d1ecff; border-top: solid 1px #d1ecff; text-align: center; padding: 5px; } .td_1, .td_7 { border-right: solid 1px #FFF; } .td_3 { text-align: left; } .td_4 { font-weight: bold; } .td_7 { font-weight: bold; color: #fe6400; font-size: 14px; } .hand { cursor: pointer; } .shopend { text-align: right; padding-right: 10px; padding-bottom: 10px; } .yellow { font-weight: bold; color: #FE6400; font-size: 18px; } </style>
<!-- 用Jquery 实现相应功能-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function() { //点击复选框全选或不全选效果 $("#allcheckBok").click(function() { var checked = $(this).is(":checked"); $(".td_1").children().attr("checked",checked); });
//判断是否全选 @R_706_3816@ Allchk() { var checkedB = $(".td_1").children(); var sum = checkedB.size(); var k = 0; checkedB.each(function(index,dom) { if($(dom).is(":checked")) k++; });
if(k == sum) { $("#allcheckBok").attr("checked",truE); } else { $("#allcheckBok").attr("checked",falsE) }
}
//单选判断 $(".td_1").children().click(function() { Allchk(); })
//计算总价与小计 @R_706_3816@ prodC() { var $tr = $("#shopping").find("tr[id]"); var summer = 0; var integral = 0; $tr.each(function(i,dom) { var num = $(dom).children(".td_6").find("input").val(); //商品数量 var price = num * $(dom).children(".td_5").text(); //商品小计 $(dom).children(".td_7").html(pricE); //显示商品小计 summer += price; //总价 integral += $(dom).children(".td_4").text() * num; //积分 }); $("#@R_434_10586@l").text(summer); $("#integral").text(integral); } prodC(); //页面加载完成后运行
//商品增加减少 ，flag 为true时增加 flag为false时减少 @R_706_3816@ changN(dom,flag) { var $input = $(dom).parent().find("input"); var value = $input.val(); if(flag) { value++; } else { value--; if(value < 0) { value = 0; alert("宝贝数量不能为负值") } } $input.val(value); prodC(); };
//点击增加 $(".td_6").find("img[alt=‘minus‘]").click(function() { changN(this,falsE); }); //点击减少 $(".td_6").find("img[alt=‘add‘]").click(function() { changN(this,truE); });
//点击删除 $(".td_8").find("a").click(function() { $(this).parent().parent().prev().remove(); //删除前一tr $(this).parent().parent().remove(); //删除当前tr prodC(); }); //点击删除所选 $("#deleteAll").click(function() { $("#shopping").find("tr[id]").each(function(i,E) { var $tr = $(E); var checked = $tr.children(".td_1").children().is(":checked"); if(checked) { $tr.prev().remove(); $tr.remove(); } }); prodC()
});
}) </script>
<body> <div id="header"><img src="img/taobao_logo.gif" alt="logo"></div> <div id="nav">您的位置： <a href="#">首页</a>> <a href="#">我的淘宝</a>>我的购物车</div> <div id="navlist"> <ul> <li class="navlist_red_left"></li> <li class="navlist_red">1.查看购物车</li> <li class="navlist_red_arrow"></li> <li class="navlist_gray">2.确定订单信息</li> <li class="navlist_gray_arrow"></li> <li class="navlist_gray">3.付款到支付宝</li> <li class="navlist_gray_arrow"></li> <li class="navlist_gray">4.确定收货</li> <li class="navlist_gray_arrow"></li> <li class="navlist_gray">5.评价</li> <li class="navlist_gray_right"></li> </ul> </div>
<div id="content"> <form action="" method="post" name="myform"> <table width="100%" border="0" cel@R_607_10697@ding="0" cellspacing="0" id="shopping"> <tr> <td class="title_1"><input id="allcheckBok" type="checkBox" value="">全选</td> <td class="title_2" colspan="2">店铺宝贝</td> <td class="title_3">获积分</td> <td class="title_4">单价（元）</td> <td class="title_5">数量</td> <td class="title_6">小计（元）</td> <td class="title_7">操作</td> </tr>
<tr> <td colspan="8" class="line"></td> </tr>
<tr> <td colspan="8" class="shopInfo">店铺： <a href="#">纤巧百媚时尚鞋坊</a> 卖家： <a href="#">纤巧百媚</a><img src="img/taobao_relation.jpg"></td> </tr> <tr id="product1"> <td class="td_1"><input type="checkBox" name="cartcheckBox" value="product1"></td> <td class="td_2"><img src="img/taobao_cart_01.jpg" alt="shopping" </td> <td class="td_3"> <a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br /> 颜色：棕色 尺码：37<br /> 保障： <img src="img/taobao_icon_01.jpg" /> </td> <td class="td_4">5</td> <td class="td_5">138.00</td> <td class="td_6"><img src="img/taobao_minus.jpg" alt="minus" class="hand"> <input type="text" id="num_1" value="1" class="num_input" readonly="readonly"> <img src="img/taobao_adding.jpg" alt="add" class="hand" /></td> <td class="td_7"></td> <td class="td_8"> <a href="javascript:void(0):">删除</a> </td> </tr>
<tr> <td colspan="8" class="shopInfo">店铺： <a href="#">香港我的美丽日记</a> 卖家： <a href="#">lokemick2009</a> <img src="img/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product2"> <td class="td_1"><input name="cartcheckBox" type="checkBox" value="product2" /></td> <td class="td_2"><img src="img/taobao_cart_02.jpg" alt="shopping" /></td> <td class="td_3"> <a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br /> 保障： <img src="img/taobao_icon_01.jpg" alt="icon" /> <img src="img/taobao_icon_02.jpg" alt="icon" /></td> <td class="td_4">12</td> <td class="td_5">265.00</td> <td class="td_6"><img src="img/taobao_minus.jpg" alt="minus" class="hand" /> <input id="num_2" type="text" value="1" class="num_input" readonly="readonly" /> <img src="img/taobao_adding.jpg" alt="add" class="hand" /></td> <td class="td_7"></td> <td class="td_8"> <a href="javascript:void(0);">删除</a> </td> </tr>
<tr> <td colspan="8" class="shopInfo">店铺： <a href="#">实体经营</a> 卖家： <a href="#">林颜店铺</a> <img src="img/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product3"> <td class="td_1"><input name="cartcheckBox" type="checkBox" value="product3" /></td> <td class="td_2"><img src="img/taobao_cart_03.jpg" alt="shopping" /></td> <td class="td_3"> <a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a><br /> 保障： <img src="img/taobao_icon_01.jpg" alt="icon" /> <img src="img/taobao_icon_02.jpg" alt="icon" /></td> <td class="td_4">3</td> <td class="td_5">85.00</td> <td class="td_6"><img src="img/taobao_minus.jpg" alt="minus" class="hand" /> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly" /> <img src="img/taobao_adding.jpg" alt="add" class="hand" /></td> <td class="td_7"></td> <td class="td_8"> <a href="javascript:void(0);">删除</a> </td> </tr>
<tr> <td colspan="8" class="shopInfo">店铺： <a href="#">红豆豆的小屋</a> 卖家： <a href="#">taobao豆豆</a> <img src="img/taobao_relation.jpg" alt="relation" /></td> </tr> <tr id="product4"> <td class="td_1"><input name="cartcheckBox" type="checkBox" value="product4" /></td> <td class="td_2"><img src="img/taobao_cart_04.jpg" alt="shopping" /></td> <td class="td_3"> <a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br /> 保障： <img src="img/taobao_icon_01.jpg" alt="icon" /></td> <td class="td_4">12</td> <td class="td_5">12.00</td> <td class="td_6"><img src="img/taobao_minus.jpg" alt="minus" class="hand" /> <input id="num_4" type="text" value="2" class="num_input" readonly="readonly" /> <img src="img/taobao_adding.jpg" alt="add" class="hand" /></td> <td class="td_7"></td> <td class="td_8"> <a href="javascript:void(0);">删除</a> </td> </tr>
<tr> <td colspan="3"> <a id="deleteAll" href="javascript:void(0)"><img src="img/taobao_del.jpg" alt="delete" /></a> </td> <td colspan="5" class="shopend">商品总价（不含运费）：<label id="@R_434_10586@l" class="yellow"></label>元<br /> 可获积分 <label class="yellow" id="integral"></label>点<br /> <input name="" type="image" src="img/taobao_subtn.jpg" /></td> </tr>
</table>
</form> </div>
</body>
</html>
以上是大佬教程为你收集整理的JQuery 实现 购物车页面 实现简单功能，（包括计算，删除）全部内容，希望文章能够帮你解决JQuery 实现 购物车页面 实现简单功能，（包括计算，删除）所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。