当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery实现select选中行、列合计示例

jquery实现select选中行、列合计示例

2019年03月23日  | 移动技术网IT编程  | 我要评论

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>



<p>
<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>
</p>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网