点击右边的选中与差,下面对应的每列的价格总和都会有相对应的变化
写一个遍历数据行的函数,判断CheckBox选中就累加,在设置页脚的统计信息,在CheckBox的change事件和删除确认后执行这个函数,有帮助麻烦点个采纳【本回答右上角】,谢谢~
示例代码
<table border="1" id="tb">
<tr><td></td><td>1省</td><td>3省</td><td>6省</td><td>全国</td><td>选中</td><td>删除</td></tr>
<tr><td></td><td>¥1000</td><td>¥2000</td><td>¥3000</td><td>¥4000</td><td><input type="checkbox" /></td><td><a>X</a></td></tr>
<tr><td></td><td>¥1000</td><td>¥2000</td><td>¥3000</td><td>¥4000</td><td><input type="checkbox" /></td><td><a>X</a></td></tr>
<tr><td></td><td>¥1000</td><td>¥2000</td><td>¥3000</td><td>¥4000</td><td><input type="checkbox" /></td><td><a>X</a></td></tr>
<tr><td></td><td>¥1000</td><td>¥2000</td><td>¥3000</td><td>¥4000</td><td><input type="checkbox" /></td><td><a>X</a></td></tr>
<!--统计对应td加id-->
<tr><td>统计</td><td id="s1"></td><td id="s2"></td><td id="s3"></td><td id="s4"></td><td></td><td></td></tr>
</table>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
function summary() {
var s1 = 0, s2 = 0, s3 = 0, s4 = 0, v, re = /\d+(\.\d+)?/;
$('#tb').find(':checkbox:checked')//这里选择器同样,如果存在其他非选中的CheckBox,要增加特殊class进行区分
.each(function () {
var td = $(this).parent().prev();//全国td
v = re.exec(td.text());
s4 += parseFloat(v) || 0;
td = td.prev();//6省
v = re.exec(td.text());
s3 += parseFloat(v) || 0;
td = td.prev();//3省
v = re.exec(td.text());
s2 += parseFloat(v) || 0;
td = td.prev();//1省
v = re.exec(td.text());
s1 += parseFloat(v) || 0;
});
$('#s4').text(s4);
$('#s3').text(s3);
$('#s2').text(s2);
$('#s1').text(s1);
}
$('#tb').on('click', ':checkbox,a', function () {
if (this.tagName == 'A') {//如果表格存在其他非删除的a对象,最好给删除按钮加一个样式,通过this.className=='del'来判断
if (!confirm('确认删除?!')) return false;
$(this).closest('tr').remove();
}
summary();
});
</script>
可以实现,将四个价格的以属性的方式添加到多选框,当点击多选框时,获取这四个属性值相加求和
点击删除后要重新从后台重新数据,并且刷新界面。
checkbox change事件传整个表格的数据