本人用jquery写的简明版本购物车

来源：互联网发布：大数据的前景分析编辑：程序博客网时间：2024/04/28 17:19

废话不多说直接贴上源代码

<!DOCTYPE><HTML><head><meta http-equiv="Content" type="Content"></meta><script language="javascript" type="text/javascript" src="js/jquery-1.9.1.js"></script><script language="javascript" type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script><script language="javascript" type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script><script language="javascript" type="text/javascript" src="js/jqueryday06.js"></script></head><body><form action="" method="post"><table><thead><tr><th>我的购物车</th></tr></thead><tbody><tr><td>Hadoop实战</td><td>58.90</td><td><input type="button" value="+" id="add"/><input type="text" value=1 id="purchaseCount"><input type="button" value="-" id="decrease"></td><td>58.90</td><td>删除</td></tr><tr><td>Hadoop教程</td><td>48.60</td><td><input type="button" value="+" id="add"/><input type="text" value=1 id="purchaseCount"><input type="button" value="-" id="decrease"></td><td>48.60</td><td>删除</td></tr><tr><td>Hadoop权威指南</td><td>158.90</td><td><input type="button" value="+" id="add"/><input type="text" value=1 id="purchaseCount"><input type="button" value="-" id="decrease"></td><td>158.90</td><td>删除</td></tr><tr><td>HadoopMapReduce架构</td><td>68.90</td><td><input type="button" value="+" id="add"/><input type="text" value=1 id="purchaseCount"><input type="button" value="-" id="decrease"></td><td>68.90</td><td>删除</td></tr></tbody></table></form><div><div>合计：<div id="sum"></div></div></div></body></HTML>

下面是js代码片段

//购物车案例$(document).ready(function(){var addArr=$("input#add").toArray();var purchaseArr=$("input#purchaseCount").toArray();var deArr=$("input#decrease").toArray();for(var i=0;i<addArr.length;i++){addArr[i].onclick=function(){var num=$(this).parent().parent().index();var tdArr=$(this).parent().parent().children().toArray();var price=parseFloat(tdArr[1].innerHTML);var count=parseFloat(purchaseArr[num].value);count++;purchaseArr[num].value=count;var sum=(price*count).toFixed(2);tdArr[3].innerHTML=parseFloat(sum);getSum();};deArr[i].onclick=function(){var num=$(this).parent().parent().index();var tdArr=$(this).parent().parent().children().toArray();var price=parseFloat(tdArr[1].innerHTML);var count=parseFloat(purchaseArr[num].value);if(count>0){count--;}purchaseArr[num].value=count;var sum=(price*count).toFixed(2);tdArr[3].innerHTML=parseFloat(sum);getSum();}getSum();}function getSum(){var sumprice=0;var trArr=$("tbody").children().toArray();for(var i=0;i<trArr.length;i++){var tdArrs=$(trArr[i]).children().toArray();var sums=parseFloat(tdArrs[3].innerHTML);sumprice=sumprice+sums;}    document.getElementById("sum").innerHTML=sumprice.toFixed(2);}});

我现在觉得javascript就是不如jquery来的方便啊！

0 0