终于写好购物车2了赶快发出来
这次引入了jquery，比上次简洁多了，但是还是有问题，就是当客户加入相同的商品两次是，购物车中会出现相同的商品两次，所以在商品加入购物车之前需要判断一下购物车中是否已经加入了该商品，如果加入则把商品的数量加1
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
h1{
text-align: center;
}
table{
background-color: #DDD;
margin: 0 auto;
width:60%;
border: 2px solid #999;
border-collapse:collapse;
}
table th,table td{
border: 2px solid #999;
padding:5px;
text-align: center;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
//添加商品的函数：
function addProduct(obj) {
//1获取obj父元素td所有的同胞td元素
var tds = $(obj).parent().siblings();
//2获取tds下要添加商品的商品名和单价信息
var productName = tds.eq(0).text();
var productPrice = tds.eq(1).text();
//3创建一个要添加的商品元素：
var newTr = $(
"<tr> <td>"+productName+"</td> <td>"+productPrice+"</td> <td> <input type='button' value='-' onclick='updataProduct(this,-1)'/> <input type='text' value='1' readonly/> <input type='button' value='+' onclick='updataProduct(this,1)'/> </td> <td>"+productPrice+"</td> <td> <input type='button' value='移除商品' onclick='deleteProduct(this)'/> </td> </tr>"
);
//4获取购物车最上面一列tr元素
var productAfterTr = $("#productAfterTr");
//4把创建好的newTr作为兄弟元素加入最上一列的下面
productAfterTr.after(newTr);
//5计算一下总价
totalPrice();
}
//删除商品的函数：
function deleteProduct(obj) {
//直接获取input父元素的父元素tr然后删除
$(obj).parent().parent().remove();
//计算一下总价
totalPrice();
}
//更新一件商品数量的函数：这儿有点难度
function updataProduct(obj,n) {
//1获取当前input元素父元素的所有input子元素：
var ins = $(obj).parent().children();
//2获取原来的商品数量
var count = parseInt(ins.eq(1).val());
//3判断一下这个是是否是1
if(count == 1 && n == -1){
alert("商品数量最小为1");
return;
}
//3更新ins元素中第二个input元素的value
ins.eq(1).val(count+n);
//4从新计算一下当前单件商品的总价
aTotalPrice(obj);
totalPrice();
}
//计算单价商品总价的函数：
function aTotalPrice(obj) {
//1获取单件商品总价的td
var td = $(obj).parent().parent().children().eq(3);
//2获取商品的单价和数量
var price = parseFloat(td.parent().children().eq(1).text());
var count = parseFloat(td.parent().children().eq(2).children().eq(1).val());
//设置总价td中的text
td.parent().children().eq(3).text(price*count);
}
//计算总价的函数：
function totalPrice() {
var totalPrice = 0;
//获取购物车Table下所有tr的所有第三个td中的单价商品总金额aPrice
var allTr = $("tbody").eq(1).children();
//遍历所有td.text();
for(var i=1;i<allTr.length-1;i++){
var aTotalPrice = parseFloat(allTr.eq(i).children().eq(3).text());
totalPrice = totalPrice+aTotalPrice;
}
$("#total").text(totalPrice);
}
</script>
</head>
<body>
<h1>商品列表</h1>
<table>
<tr>
<th>商品</th>
<th>单价（元）</th>
<th>颜色</th>
<th>库存</th>
<th>加入购物车</th>
</tr>
<tr>
<td>鼠标</td>
<td>8</td>
<td>黑色</td>
<td>78</td>
<td><input type="button" value="加入购物车" onclick="addProduct(this)"/></td>
</tr>
<tr>
<td>键盘</td>
<td >90</td>
<td>黑色</td>
<td>78</td>
<td><input type="button" value="加入购物车" onclick="addProduct(this)"/></td>
</tr>
<tr>
<td>手机</td>
<td>678</td>
<td>黑色</td>
<td>70</td>
<td><input type="button" value="加入购物车" onclick="addProduct(this)"/></td>
</tr>
<tr>
<td>耳机</td>
<td>78</td>
<td>黑色</td>
<td>8</td>
<td><input type="button" value="加入购物车" onclick="addProduct(this)"/></td>
</tr>
<tr>
<td>U盘</td>
<td>7</td>
<td>黑色</td>
<td>78</td>
<td><input type="button" value="加入购物车" onclick="addProduct(this)"/></td>
</tr>
</table>
<h1>购物车</h1>
<table>
<tr id="productAfterTr">
<th>商品</th>
<th>单价（元）</th>
<th>数量</th>
<th>金额（元）</th>
<th>删除</th>
</tr>
<tr>
<td colspan="3">总计</td>
<td id="total">0</td>
<td></td>
</tr>
</table>
</body>
</html>
这是第三篇购物车3的链接：
http://blog.csdn.net/JustGo_ChenXi/article/details/77296198
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
