废话不多说直接贴上源代码
<!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].οnclick=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].οnclick=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来的方便啊!