这次写的功能差不多都做到了,但是选择器的使用比较单一,用的最多的就是parent children什么的,还可以做改进,有时间再看看,先把功能做出来嘛
效果图
代码:
<!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>
<!-- jquery的使用步骤:
1,引入jquery
2,使用选择器定位要操作的节点
3,调用jQuery的方法进行操作
-->
<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创建一个要添加的商品元素,创建之前判断该商品是否已经加到购物车了
如果已经添加过了,则数量加1
*/
var allTr = $("tbody").eq(1).children();
for(var i=1;i<allTr.length-1;i++){
if(productName == (allTr.eq(i).children().eq(0).text())){
//获取购物车中数量+对象
var addObj = allTr.eq(i).children().eq(2).children().eq(2);
updataProduct(addObj,1);
aTotalPrice();
totalPrice();
return;
}
}
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>