提示:因为input type=number类型的增加减少箭获取很麻烦,所以只能写成随价格改变然后触发change事件
html代码如下(示例):
<table>
<thead>
<tr>
<th class="product_remove">全选<br/><input class="check" type="checkbox" /></th>
<th class="product_thumb">商品图片</th>
<th class="product_name">商品名称</th>
<th class="product-price">单价</th>
<th class="product_quantity">数量</th>
<th class="product_total">总价格</th>
<th class="product_remove">删除</th>
</tr>
</thead>
<tbody>
<tr>
<td class="product_remove"><input class="check2" type="checkbox" name="text"></td>
<td class="product_thumb"><a href="#"><img src=链接 alt=""></a></td>
<td class="product_name"><a href="#">***</a></td>
<td class="product-price">80</td>
<td class="product_quantity"><input value=1 type="number" id="num" min=1 max=100></td>
<td class="product_total">80</td>
<td class="product_remove"><a href="#"><iclass="fa fa-trash-o"></i></a></td>
</tr>
</tbody>
</table>
<p>合计:</p>
<p class="cart_amount" id="p_price">0</p>元
jquery代码如下(示例):
$(".cart_page").on('change', "#num", function () {
var tr = $(this).parent().parent();//找到tr标签
var price = tr.children().eq(3).text();//商品单价
var num = tr.children().eq(4).children().val();//改变后的数量
var count = Number(price) * Number(num);//单个商品总价
tr.children().eq(5).text(count);//单个商品总价改变
//找到当前table
var table = tr.parent().parent();//table
var trs = table.children("tbody").children();//获取tbody中的所有tr
var arr = [];
var ccount = 0;
for (var i = 0; i < trs.length; i++) {
var c = trs.eq(i).children().eq(5).text();//找到每个单个商品的总价格
var checkhelp = trs.eq(i).children().eq(0).children().prop("checked"); //判断这个商品是否被选中
if (checkhelp == true) {
arr.push(c);//如果被选中将总价格传入数组
}
}
//循环数据中所有单个商品总价然后汇总求和
for (var j = 0; j < arr.length; j++) {
ccount += Number(arr[j]);
$("#p_price").text(ccount);//所有商品总价汇总总价改变
}
//清空数据和汇总总价
ccount = 0;
arr.splice(0, arr.length);
})
学习总结:
input type=number类型框的箭头还是有一些丑的,也可以隐藏箭头,然后在框左右两边都给一个a标签点击数量变化。