做的一个关于购物车的小案例，用表格实现，欢迎指正！
功能包括以下几点：
1、商品全选、全不选
2、选择删除商品
3、清空购物车
4、已选择多少件商品
5、选中商品总价
6、商品数量加减
7、删除商品
记得引入jQuery插件！
记得引入jQuery插件！
记得引入jQuery插件！
重要的事情说三遍
布局：
<table cellspacing='0' cellpadding='0'>
<thead>
<tr>
<th>
<input type="checkbox" id="all">全选
</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="dx" checked="checked">
</td>
<td>
<img src="./img/l.jpg" alt="">
苹果
</td>
<td>999</td>
<td>
<input type="button" value="-" class="jian">
<input type="text" class="txt" value="1">
<input type="button" value="+" class="jia">
</td>
<td>999</td>
<td><a>删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" class="dx">
</td>
<td>
<img src="./img/l.jpg" alt="">
菠萝
</td>
<td>999</td>
<td>
<input type="button" value="-" class="jian">
<input type="text" class="txt" value="1">
<input type="button" value="+" class="jia">
</td>
<td>999</td>
<td><a>删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" class="dx">
</td>
<td>
<img src="./img/l.jpg" alt="">
香蕉
</td>
<td>999</td>
<td>
<input type="button" value="-" class="jian">
<input type="text" class="txt" value="1">
<input type="button" value="+" class="jia">
</td>
<td>999</td>
<td><a>删除</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">
<input type="button" value="选中删除" id="xs">
<input type="button" value="清空购物车" id="qk">
已选择<strong>1</strong>件商品
总价：<strong>999</strong>
</td>
</tr>
</tfoot>
</table>
样式：
table,thead,table,tr,td,th{
margin: 0;
padding: 0;
}
table,tbody,thead,tr,th,td{
border: 1px solid;
text-align: center;
}
td{
padding: 3px;
}
td>img{
width: 80px;
height: 50px;
}
.jia{
padding: 5px;
}
.jian{
padding: 5px;
}
.txt{
width: 100px;
height: 25px;
}
js逻辑代码：
// 全选按钮
$('#all').click(function () {
// 当前复选框的属性
var status = $(this).prop('checked')
// 选中的属性
$('.dx').prop('checked', status)
zj() //调用总价
})
//判断当前的全选按钮是否选中
function check_all() {
//获取class为dx的所有的复选框的个数
var dx = $(".dx").length;
// 获取选中的复选框的个数
var dx1 = $(".dx:checked").length;
if (dx == dx1) {
$("#all").prop("checked", true);
} else {
$("#all").prop("checked", false);
}
}
//给按钮绑定点击事件，调用全选按钮的判断条件
$(".dx").click(function () {
check_all();
zj(); // 总价
})
// 选中删除
$('#xs').click(function () {
// 遍历复选框是否选中
$('.dx').each(function (index, item) {
// 如果复选框属性等于true
if ($(item).prop('checked') == true) {
// 当前元素的父元素的父元素删除
$(this).parent().parent().remove()
}
})
zj() // 总价
})
// 清空购物车
$('#qk').click(function () {
// 删除tbody
$('tbody').empty();
})
// 减
$('.jian').click(function () {
// 获取当前元素的下一个兄弟元素的val值
var num = parseInt($(this).next().val());
num--;
if (num = 1) {
num = 1;
}
// 当前元素的下一个兄弟元素val值是num
$(this).next().val(num)
zj() // 总价
})
// 加
$('.jia').click(function () {
// 获取当前元素的上一个兄弟元素的val值
var num = parseInt($(this).prev().val());
num++;
// 当前元素的上一个兄弟元素的val值为num
$(this).prev().val(num)
zj() // 总价
})
// 删除
$('tr>td>a').click(function () {
// 当前父元素的父元素删除
$(this).parent().parent().remove();
zj() // 总价
})
// 总价
function zj() {
var zj = 0.00; //商品总价
var sl = 0; //选中商品数量
$('.dx:checked').each(function () {
// 单价
var dj = $(this).parent().nextAll().eq(1).text();
// 商品数量
var num = $(this).parent().nextAll().eq(2).children('.txt').val()
// 总价
zj += num * dj;
//数量
sl += parseInt(num);
})
// 选中商品的总数量
$('strong').eq(0).text(sl);
// 总计商品的总价格
$('strong').eq(1).text(zj.toFixed(2));
// 遍历选中商品
$('.dx').each(function () {
// 单价
var dj = $(this).parent().nextAll().eq(1).text();
//商品数量
var num = $(this).parent().nextAll().eq(2).children('.txt').val()
// 总价
var totals = num * dj;
$(this).parent().nextAll().eq(3).text(totals.toFixed(2))
})
}
zj()
