jquery购物车清算实咧

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="miaov_style.css" rel="stylesheet" type="text/css" />
<script src="../jquery-1.10.1.min.js"></script>
<script>
$(function(){
//隔行变色
$("#taobao_table>tbody tr:even").addClass("bgColor");

//全选
$("#checkAllChange").click(function() {
if (this.checked == true) {
$(".goods").each(function() {
this.checked = true;
});
} else {
$(".goods").each(function() {
this.checked = false;
});
}
getTotalPrice();
});

//价格计算
$(document).on('click', '.goods', function() {
getTotalPrice();
})

//删除
$(document).on('click', 'input[type=button]', function() {
$(this).parents("tr").remove();
changeColor();
getTotalPrice();
})

//切换
$("#priceSort").click(function(){
if($(this).hasClass("btn_active")){
$(this).removeClass("btn_active");
$(this).addClass("btn_down");
sortNum(true);
}else{
$(this).removeClass("btn_down");
$(this).addClass("btn_active");
sortNum(false);
}
});

});

//换色
function changeColor(){
$("#taobao_table>tbody tr").removeClass("bgColor");
$("#taobao_table>tbody tr:even").addClass("bgColor");
}

//价格计算
function getTotalPrice(){
var total = 0;
$(":checkbox:gt(0):checked").each(function(index, element) {
total += parseFloat($(this).parent().parent().find("span").text());
});
$("#taobao_table>tfoot span").text(total.toFixed(2));
}

//排序
function sortNum(activ){
for(var i=0; i<$("#taobao_table>tbody tr").length; i++){
var fM = parseFloat($("#taobao_table>tbody tr:eq("+i+")").find("span").text());
for(var j=0; j<$("#taobao_table>tbody tr").length; j++){
var nM = (parseFloat($("#taobao_table>tbody tr:eq("+j+")").find("span").text()));
if(activ){
if(fM > nM){
var temp = $("#taobao_table>tbody tr:eq("+i+")").html();
$("#taobao_table>tbody tr:eq("+i+")").html($("#taobao_table>tbody tr:eq("+j+")").html());
$("#taobao_table>tbody tr:eq("+j+")").html(temp);
}
}else{
if(fM < nM){
var temp = $("#taobao_table>tbody tr:eq("+i+")").html();
$("#taobao_table>tbody tr:eq("+i+")").html($("#taobao_table>tbody tr:eq("+j+")").html());
$("#taobao_table>tbody tr:eq("+j+")").html(temp);
}
}

}
}
}

</script>

</head>

<body>

<table id="taobao_table">
<thead>
<tr>
<th><label><input type="checkbox" id="checkAllChange"/> 全选</label></th>
<th>商品名</th>
<th width="70"><a id="priceSort" class="btn_active" href="#">价格</a></th>
<th width="70"><a id="addressSort" class="btn" href="#">地区</a></th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" width="60"><input type="checkbox" class="goods"/></td>
<td align="center"><img src="images/1.jpg" alt="商品一" longdesc="" /><a href="">果绿后背钩花蝴蝶镂空长袖针织衫开衫小披肩韩国气质薄2010秋新</a></td>
<td align="center">¥<span>59.00</span></td>
<td align="center">北京</td>
<td align="center"><input type="button" value="删除" /></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="goods"/></td>
<td align="center"><img src="images/2.jpg" alt="商品二" longdesc="" /><a href="">2016夏装新款韩版女装</a></td>
<td align="center">¥<span>98.00</span></td>
<td align="center">广东</td>
<td align="center"><input type="button" value="删除" /></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="goods"/></td>
<td align="center"><img src="images/3.jpg" alt="商品三" longdesc="" /><a href="">随意美妙 O.SA欧莎热卖女装2016秋新韩版纯棉短袖T恤女ST00401</a></td>
<td align="center">¥<span>33.00</span></td>
<td align="center">上海</td>
<td align="center"><input type="button" value="删除" /></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="goods"/></td>
<td align="center"><img src="images/1.jpg" alt="商品二" longdesc="" /><a href="">2016秋装新款韩版女装淑女花苞波西米亚条纹连衣裙Q0070</a></td>
<td align="center">¥<span>198.00</span></td>
<td align="center">广东</td>
<td align="center"><input type="button" value="删除" /></td>
</tr>
<tr>
<td align="center" width="60"><input type="checkbox" class="goods"/></td>
<td align="center"><img src="images/5.jpg" alt="商品一" longdesc="" /><a href="">韩国新款小清新柔软格子口袋长袖中长款衬衫</a></td>
<td align="center">¥<span>29.00</span></td>
<td align="center">北京</td>
<td align="center"><input type="button" value="删除" /></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="goods"/></td>
<td align="center"><img src="images/6.jpg" alt="商品三" longdesc="" /><a href="">条纹T恤+渐变色牛仔背带裙</a></td>
<td align="center">¥<span>61.00</span></td>
<td align="center">上海</td>
<td align="center"><input type="button" value="删除" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">选中的商品总价是：¥<span>0.00</span>元</th>
</tr>
</tfoot>
</table>

</body>
</html>

jquery购物车清算实咧

猜你喜欢