一.分析需求
准备：动态生成表格
功能1：点击thead中的复选框，实现全选（控制tbody中的所有复选框）
功能2：点击tbody中复选框，控制thead中全选是否选中
功能3：封装实现计算总数量和总价格
功能4：点击加按钮实现商品数量增加
功能5：点击减按钮实现商品数量递减
功能6：点击删除按钮删除单种商品
功能7：删除所选商品功能8：清理购物车
二.根据功能写代码
1.准备：动态生成表格
for (var i = 0; i < datas.length; i++) {
var obj = datas[i];
var $tr = $('<tr></tr></tr>').appendTo('tbody');
var htmlStr = `
<td>
<input type="checkbox">
</td>
<td>
<img src="${obj.src}">
<p>${obj.pName}</p>
</td>
<td>
${obj.price}￥
</td>
<td>
<div class="count-c clearfix">
<a href="javascript:" class="reduce">-</a>
<input type="text" readonly value="2">
<a href="javascript:" class="add">+</a>
</div>
</td>
<td>
${obj.price * obj.count}￥
</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
`
$tr.html(htmlStr);
}
图片详解1：准备：动态生成表格
2. 功能1：点击thead中的复选框，实现全选（控制tbody中的所有复选框）
$('thead input').click(function ()
$('tbody input[type=checkbox]').prop('checked', this.checked)
getTotalCountAndTotalPrice();
})
图片详解2：功能1
3.功能2：点击tbody中的复选框，控制thead表格是否全选
$('tbody input').click(function () {
var len1 = $('tbody input[type=checkbox]').length
var len2 = $('tbody input[type=checkbox]:checked').length
$('thead input').prop('checked', len1 == len2);
getTotalCountAndTotalPrice();
})
图片详解3：功能2：点击tbody中的复选框，控制thead表格是否全选
4.功能3：封装实现计算总数量总价格
function getTotalCountAndTotalPrice() {
var trs = $('tbody input[type=checkbox]:checked').parent().parent();
var totalCount = 0;
var totalPrice = 0
for (var i = 0; i < trs.length; i++) {
var count = trs
.eq(i)
.find('input[type=text]')
.val();
totalCount += parseInt(count);
var xiaoji = trs
.eq(i)
.find('td')
.eq(4)
.text();
totalPrice += parseFloat(xiaoji);
}
$('#totalCount').text(totalCount);
$('#totalPrice').text(totalPrice);
}
图片详解4：功能3：封装实现计算总数量总价格
5.功能4：点击加按钮实现商品数量增加
$('.add').click(function () {
var $txt = $(this).prev();
var count = $txt.val(
count++
$txt.val(count);
var $tr = $(this).parent().parent().parent()
var price = $tr.find('td:eq(2)').text();
var xiaoji = count * parseFloat(price);
$tr.find('td:eq(4)').text(xiaoji + '￥');
$tr.find('input[type=checkbox]').prop('checked', true)
getTotalCountAndTotalPrice();
})
图片详解5：功能4：点击加按钮实现商品数量增加
6.功能5：点击减按钮实现商品数量递减
$('.reduce').click(function () {
var $txt = $(this).next();
var count = $txt.val()
count--
if (count <= 1) {
$(this).addClass('disabled');
count = 1;
}
$txt.val(count);
var $tr = $(this).parent().parent().parent()
var price = $tr.find('td:eq(2)').text();
var xiaoji = count * parseFloat(price);
$tr.find('td:eq(4)').text(xiaoji + '￥');
$tr.find('input[type=checkbox]').prop('checked', true)
getTotalCountAndTotalPrice();
})
图片详解6：功能5：点击减按钮实现商品数量递减
7.功能6：点击删除按钮删除单种商品
$('.del').click(function () {
var isOk = confirm('确定删除？');
if (isOk) {
$(this).parent().parent().remove();
getTotalCountAndTotalPrice();
showOrHideInfo()
}
})
图片详解7：功能6：点击删除按钮删除单种商品
8.功能7：删除所选商品
$('.del-all').click(function () {
var $trs = $('tbody input[type=checkbox]:checked').parent().parent();
if ($trs.length == 0) {
alert('请选中要删除的商品');
} else {
var isOk = confirm('确定删除？');
if (isOk) {
$trs.remove()
getTotalCountAndTotalPrice();
showOrHideInfo()
}
}
})
图片详解8：功能7：删除所选商品
9.功能8：清理购物车
$('.clear').click(function(){
$('.car').hide();
$('.info').show(500);
})
图片详解 9：功能8：清理购物车
封装检测是否 要显示购物车为空（调用到功能6，7，8）
function showOrHideInfo() {
var len = $('tbody tr').length
if (len == 0) {
$('.info').show(500);
$('.car').hide();
}
}
图片详解10：封装检测是否 要显示购物车为空（调用到功能6，7，8）
10.点击所有加按钮全选选中
封装函数（调用到功能4中）
function xuanZhong()
var len1 = $('tbody input[type=checkbox]').length
var len2 = $('tbody input[type=checkbox]:checked').length
$('thead input').prop('checked', len1 == len2);
}
图片详解11：点击所有加按钮全选选中
