<!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" />
<title>淘宝商品</title>
<link href="miaov_style.css" rel="stylesheet" type="text/css" />
<script src="../jquery-1.10.1.min.js"></script>
<script>
$(function(){
//1.隔行变色
$("#checkAllChange").click(function() {
if (this.checked == true) {
$(".goods").each(function() {
this.checked = true;
});
} else {
$(".goods").each(function() {
this.checked = false;
});
}
getTotalPrice();
});
$(".goods").click(function() {
getTotalPrice();
});
$("input[type='button']").click(function() {
//$(".goods:checked").each(function() {
$(this).parents("tr").remove();
// });
getTotalPrice();
});
});
function getTotalPrice(){
var fPrice = 0;
$(".goods:checked").each(function() {
fPrice += parseFloat(($(this).parents("tr").find("span").html()));
});
$("tfoot span");
$("span:last").html(fPrice.toFixed(2));
}
</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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝商品</title>
<link href="miaov_style.css" rel="stylesheet" type="text/css" />
<script src="../jquery-1.10.1.min.js"></script>
<script>
$(function(){
//1.隔行变色
$("#checkAllChange").click(function() {
if (this.checked == true) {
$(".goods").each(function() {
this.checked = true;
});
} else {
$(".goods").each(function() {
this.checked = false;
});
}
getTotalPrice();
});
$(".goods").click(function() {
getTotalPrice();
});
$("input[type='button']").click(function() {
//$(".goods:checked").each(function() {
$(this).parents("tr").remove();
// });
getTotalPrice();
});
});
function getTotalPrice(){
var fPrice = 0;
$(".goods:checked").each(function() {
fPrice += parseFloat(($(this).parents("tr").find("span").html()));
});
$("tfoot span");
$("span:last").html(fPrice.toFixed(2));
}
</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>