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

前端技术 2023/09/09 JavaScript
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>

本文地址:https://www.stayed.cn/item/24037

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。