<div id="arae">
<table border="1" style="text-align: center">
<thead>
<th>商品編號</th>
<th>商品名稱</th>
<th>商品數(shù)量</th>
<th>商品單價</th>
<th>商品總價</th>
<th>操作</th>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td>iphone4</td>
<td><input type="button" value=" + " class="ad"><span class="count">0</span><input type="button" value=" - " class="sb"></td>
<td class="danJia">2000</td>
<td><span class="price">0</span></td>
<td><input type="button" value="刪除" class="delete"></td>
</tr>
<tr>
<td>2</td>
<td>iphone4s</td>
<td><input type="button" value=" + " class="ad"><span class="count">0</span><input type="button" value=" - " class="sb"></td>
<td>2200</td>
<td><span class="price">0</span></td>
<td><input type="button" value="刪除" class="delete"></td>
</tr>
<tr>
<td>3</td>
<td>iphone5</td>
<td><input type="button" value=" + " class="ad"><span class="count">0</span><input type="button" value=" - " class="sb"></td>
<td>2400</td>
<td><span class="price">0</span></td>
<td><input type="button" value="刪除" class="delete"></td>
</tr>
<tr>
<td>4</td>
<td>iphone6</td>
<td><input type="button" value=" + " class="ad"><span class="count">0</span><input type="button" value=" - " class="sb"></td>
<td>4000</td>
<td><span class="price">0</span></td>
<td><input type="button" value="刪除" class="delete"></td>
</tr>
<tr>
<td>5</td>
<td>iphone7</td>
<td><input type="button" value=" + " class="ad"><span class="count">0</span><input type="button" value=" - " class="sb"></td>
<td>7000</td>
<td><span class="price">0</span></td>
<td><input type="button" value="刪除" class="delete"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>商品總數(shù)</td>
<td><span class="allCount">0</span></td>
<td>商品總價</td>
<td><span class="allPrice">0</span></td>
<td><input type="button" value="清空購物車" class="allDelete"></td>
</tr>
</tfoot>
</table>
</div>


#arae{
width: 550px;
margin: 0 auto;
float: left;
}
#arae span{
color: black;
text-decoration: none;
}



$('#tbody').on('click','.delete',function(){
$(this).parent().parent().empty();
showAllCount();
showAllPrice();
});
$('.allDelete').on('click',function(){
$('#tbody').empty();
});
$('#tbody').on('click','.ad',function(){
var a = $(this).next('.count').text();
a++;
$(this).next('.count').text(a);
var b = +$(this).parent().next('td').text();
s = a*b;
$(this).parent().next('td').next('td').children().text(s);
showAllCount();
showAllPrice();
}).on('click','.sb',function(){
var a = $(this).prev('.count').text();
a--;
$(this).prev('.count').text(a);
var b = +$(this).parent().next('td').text();
s = a*b;
$(this).parent().next('td').next('td').children().text(s);
showAllCount();
showAllPrice();
});
function showAllCount(){
var allSum = 0;
$('.count').each(function(){
allSum = allSum + (+$(this).text());
$('.allCount').text(allSum);
});
}
function showAllPrice(){
var allSum = 0;
$('.price').each(function(){
allSum = allSum + (+$(this).text());
$('.allPrice').text(allSum);
});
}

轉(zhuǎn)載于:https://www.cnblogs.com/xingxing88/p/6060170.html

總結(jié)

以上是生活随笔為你收集整理的模拟购物车表格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。