一.分析需求
準(zhǔn)備：動(dòng)態(tài)生成表格
功能1：點(diǎn)擊thead中的復(fù)選框，實(shí)現(xiàn)全選（控制tbody中的所有復(fù)選框）
功能2：點(diǎn)擊tbody中復(fù)選框，控制thead中全選是否選中
功能3：封裝實(shí)現(xiàn)計(jì)算總數(shù)量和總價(jià)格
功能4：點(diǎn)擊加按鈕實(shí)現(xiàn)商品數(shù)量增加
功能5：點(diǎn)擊減按鈕實(shí)現(xiàn)商品數(shù)量遞減
功能6：點(diǎn)擊刪除按鈕刪除單種商品
功能7：刪除所選商品功能8：清理購物車
二.根據(jù)功能寫代碼
1.準(zhǔn)備：動(dòng)態(tài)生成表格
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：準(zhǔn)備：動(dòng)態(tài)生成表格
2. 功能1：點(diǎn)擊thead中的復(fù)選框，實(shí)現(xiàn)全選（控制tbody中的所有復(fù)選框）
$('thead input').click(function ()?
? $('tbody input[type=checkbox]').prop('checked', this.checked)
? getTotalCountAndTotalPrice();
})
圖片詳解2：功能1
3.功能2：點(diǎn)擊tbody中的復(fù)選框宵膨，控制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：點(diǎn)擊tbody中的復(fù)選框逗柴，控制thead表格是否全選
4.功能3：封裝實(shí)現(xiàn)計(jì)算總數(shù)量總價(jià)格
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：封裝實(shí)現(xiàn)計(jì)算總數(shù)量總價(jià)格
5.功能4：點(diǎn)擊加按鈕實(shí)現(xiàn)商品數(shù)量增加
$('.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：點(diǎn)擊加按鈕實(shí)現(xiàn)商品數(shù)量增加
6.功能5：點(diǎn)擊減按鈕實(shí)現(xiàn)商品數(shù)量遞減
$('.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：點(diǎn)擊減按鈕實(shí)現(xiàn)商品數(shù)量遞減
7.功能6：點(diǎn)擊刪除按鈕刪除單種商品
$('.del').click(function () {
? var isOk = confirm('確定刪除夫啊？');
? if (isOk) {
? ? $(this).parent().parent().remove();
? ? getTotalCountAndTotalPrice();
? ? showOrHideInfo()
? }
})
圖片詳解7：功能6：點(diǎn)擊刪除按鈕刪除單種商品
8.功能7：刪除所選商品
$('.del-all').click(function () {
????? var $trs = $('tbody input[type=checkbox]:checked').parent().parent();
????? if ($trs.length == 0) {
? ????????? alert('請選中要?jiǎng)h除的商品');
????? } else {
? ? var isOk = confirm('確定刪除绑蔫？');
? ? if (isOk) {
? ? ? $trs.remove()
? ? ? getTotalCountAndTotalPrice();
? ? ? showOrHideInfo()
? ? }
? }
})
圖片詳解8：功能7：刪除所選商品
9.功能8：清理購物車
$('.clear').click(function(){
????? $('.car').hide();
????? $('.info').show(500);
})
圖片詳解 9：功能8：清理購物車
封裝檢測是否 要顯示購物車為空（調(diào)用到功能6运沦，7，8）
function showOrHideInfo() {
????? var len = $('tbody tr').length
? ? ? if (len == 0) {
????? ????????? $('.info').show(500);
????? ????????? $('.car').hide();
???????? }
}
圖片詳解10：封裝檢測是否 要顯示購物車為空（調(diào)用到功能6配深，7携添，8）
10.點(diǎn)擊所有加按鈕全選選中
封裝函數(shù)（調(diào)用到功能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：點(diǎn)擊所有加按鈕全選選中
