js购物车功能
效果图如上，直接上代码：（本文仅是相关练习 如果重要的请参考JS+COOKIES 实现丰满的购物车）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> table{ border: 2px solid #F5F6F7; } table tr td{ text-align:center; padding:0px; margin:0px; } table dl{ height="50px"; width:60px; border:1px solid red; } table dl dt{ width:60px; height:60px; border:1px solid blue; } table dl dd{ border:1px solid black; width:80px; float:left; margin-left:80px; margin-top:0px; } #left{ text-align:left; font-size:24px; } #right{ text-align:right; } </style> <script type="text/javascript" src="jquery-1.8.3.js"></script> <script type="text/javascript"> //可以参考JS+COOKIES 实现丰满的购物车 //选择框部分代码 (使用for遍历) function check(object){ var checks=document.getElementsByName("checki"); if (checks!=null) { for (var i=0;i<checks.length;i++ ) { checks[i].checked=document.getElementById("checkall").checked; } } }; //选择框部分代码 (使用for in遍历) /*function check(object){ var i; var checks=document.getElementsByName("checki"); if (checks!=null) { for(i in checks) { i.checked=document.getElementById("checkall").checked; } } }*/ //如果子选框全部选中，则让全选框选中，如果子选框中有至少一个没有选中则选框不选 function checks(){ var checkall=document.getElementById("checkall"); var checks=document.getElementsByName("checki"); var count=0; var sum=0; for (var i=0;i<checks.length ;i++ ) { if (checks[i].checked==true) { count=count+1; } if(checks[i].checked==false){ sum=sum+1; } } if (count==checks.length) { checkall.checked=true; } if (sum>0) { if (checkall.checked==true) { checkall.checked=false; } } }; //初始遍历计算小计 function FirstCalSubTotal(){ var $trs=$("tr:gt(0)"); for (var i=0;i<$trs.length ;i++ ) { var price=$($trs[i]).find("td:eq(3)").text(); var num=$($trs[i]).find("input[type='text']").val(); $($trs[i]).find("td:eq(6)").text(eval(price*num)); } CalToTal(); }; //计算总金额 function CalToTal(){ var $trs=$("tr:gt(0)"); var $total=0; for (var i=0;i<$trs.length ;i++ ) { $total=eval($total+parseInt($($trs[i]).find("td:eq(6)").text())); } $("#right").find("span").text($total); }; //操作部分代码 $(document).ready(function(){ //绑定克隆按钮 模拟添加商品 $("#add").bind("click",function(){ var $a=$("table tr:eq(1)"); $($a).clone(true).appendTo("table"); var $b=$("tr").size()+1; var $c=$($a).clone().find("td:eq(3)"); CalToTal(); }); //删除功能 $("input[type='button'][value='删除']").bind("click",function(){ var $tr=$(this).parent().parent().index();//获取要删除的TR的index $("tr:eq('"+$tr+"')").remove(); CalToTal(); }); //实现数量的减功能 $("input[type='button'][value='-']").bind("click",function(){ var n=parseInt($(this).next().val()); if (n==1) { $(this).css("background","blue"); $(this).Enable=false; $(this).next().attr("value",1); } else{ $(this).next().attr("value",eval(n-1)); //小计 var price=parseFloat($(this).parent().prev().text()); $(this).parent().next().next().text(eval(price*n)); CalToTal(); } }); //实现数量的增功能 $("input[type='button'][value='+']").bind("click",function(){ var n=parseInt($(this).prev().val()); $(this).prev().prev().css("background-color","#E5E5E5"); $(this).prev().attr("value",eval(n+1)); //小计 var price=parseFloat($(this).parent().prev().text()); $(this).parent().next().next().text(eval(price*n)); CalToTal(); }); //测试按钮 $("div").children("input[type='button']").bind("click",function(){ var len=eval($("tr").size()-1);//获取tr的个数 var $tr=$("tr:gt(0)"); for(var i=0;i<len;i++){ alert($($tr[i]).children("td:eq(3)").html()); } }); }); </script> </head> <body onload="FirstCalSubTotal()"> <table border="1px solid red;"> <tr> <td><input type="checkbox" id="checkall" onclick="check(this)">全选</td> <td width="100px;">商品编号</td> <td style=" width:200px;">商品信息</td> <td width="100px;">价格</td> <td width="150px;">数量</td> <td width="100px;">操作</td> <td width="100px;">小记</td> </tr> <tr> <td><input type="checkbox" name="checki" onclick="checks()"></td> <td>B1230880</td> <td> <dl> <dt><input type="image" src="car.jpg" width="60px" height="60px";></dt> <dd>矿车</dd> <dd>五行</dd> </dl> </td> <td>120.00</td> <td> <input type="button" value="-" onclick=""> <input type="text" value="1" name="num" style="text-align:center; width:50px;"> <input type="button" value="+" onclick=""> </td> <td > <input type="button" value="删除" id="del1" > </td> <td id="subtotal" value=''>0.00</td> </tr> <tr> <td><input type="checkbox" name="checki" onclick="checks()"></td> <td>B1230770</td> <td> <dl> <dt><input type="image" src="car.jpg" width="60px" height="60px";></dt> <dd>矿车</dd> <dd>五行</dd> </dl> </td> <td>360.00</td> <td> <input type="button" value="-"> <input type="text" value="2" name="num" style="text-align:center; width:50px;"> <input type="button" value="+"> </td> <td > <input type="button" value="删除" id="del2" > </td> <td id="subtotal" value=''>0.00</td> </tr> <tr> <td><input type="checkbox" name="checki" onclick="checks()"></td> <td>B1230990</td> <td> <dl> <dt><input type="image" src="car.jpg" width="60px" height="60px";></dt> <dd>矿车</dd> <dd>五行</dd> </dl> </td> <td>240.00</td> <td> <input type="button" value="-" id="addnum"> <input type="text" value="3" name="num" style="text-align:center; width:50px;"> <input type="button" value="+" id="reducenum"> </td> <td > <input type="button" value="删除" id="del3" > </td> <td id="subtotal" value=''>0.00</td> </tr> </table> <div style="width:830px; border:2px solid #EBEBEB;"> <div id="left"><a href="#" id="add">模拟添加订单</div> <div><input type="button" value="测试按钮"></div> <div id="right"><a href="#" id="all">总价:<span style="font-size:24px; color:red;">330</span>元</div> </div> </body> </html>
浙公网安备 33010602011771号