jquery实现select选中行、列合计示例
更新时间:2014年04月25日 15:24:04 作者:
这篇文章主要介绍了jquery如何实现select选中行、列合计示例 ,需要的朋友可以参考下
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>
复制代码 代码如下:
$(
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>
相关文章
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
这篇文章主要介绍了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法,可实现图片拖拽变换的功能,需要的朋友可以参考下2015-08-08
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生. jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN]) 这两个属性都是用于合并两个或多个对象的属性到target对象.2014-06-06
JQuery.validationEngine表单验证插件(推荐)
这篇文章主要介绍了JQuery.validationEngine表单验证插件(推荐)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-12-12


最新评论