jQuery实现表格动态合计与行显示控制的完整示例

jQuery实现表格动态合计与显示控制

jQuery 技术要点

 
$( 
function () {
// 页面初始化时执行人员统计汇总计算
calcSum();
}); 
// 汇总行逻辑处理
/* 
将汇总行作为中间载体
遍历各单元格并与对应列汇总值累加
从而得出每列的合计结果
*/ 
function trVisible(chk, index) {
var disValue = $("#Tr" + index).css("display");
if (chk.checked) {
$("#Tr" + index).css("display", "block");
} 
} else {
$("#Tr" + index).css("display", "none");
} 
calcSum();
} 
function calcSum() {
// 初始化汇总行数值为0
$("#trSum").each(function () {
$(this).find("td").each(function () {
if ($(this).index() != 0) {
$(this).text("0");
} 
}); 
}); 
$("#tabrytj").find("tr").each(function () {
var trDis = $(this).css("display");
// 隐藏状态的行不参与求和
if (trDis == "block") {
$(this).find("td").each(function () {
var index = $(this).index();
if (index >= 1) {
var tdValue = $("#trSum").find("td:eq(" + index + ")").text();
// totalSum += parseFloat($(this).text());
$("#trSum").find("td:eq(" + index + ")").text(parseFloat(tdValue) + parseFloat($(this).text()));
} 
}); 
} 
}); 
} 

HTML 结构说明

 
<table>
<tr>
<td>分公司</td>
<td>
<select>
<option>
华南分公司
</option>
</select>
</td>
<td><input type="checkbox" onclick="trVisible(this,1)" name="chk1" id="chk1" checked="checked" />张1</td>
<td><input type="checkbox" onclick="trVisible(this,2)" checked="checked" />张2</td>
<td><input type="checkbox" onclick="trVisible(this,3)" checked="checked" />张3</td>
<td><input type="checkbox" onclick="trVisible(this,4)" checked="checked" />张4</td>
<td><input type="checkbox" onclick="trVisible(this,5)" checked="checked" />张5</td>
<td><input type="checkbox" onclick="trVisible(this,6)" checked="checked" />张6</td>
</tr>
</table>
<div>
<table border="0" class="tableinfo" id="tabrytj">
<tr id="Tr1" style="display:block">
<td>张1 </td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
</tr>
<tr id="Tr2" style="display:block">
<td>张2 </td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
</tr>
<tr id="Tr3" style="display:block">
<td>张23 </td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
</tr>
<tr id="trSum">
<td></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>
</div>