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


Posted in Javascript onApril 25, 2014

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>
Javascript 相关文章推荐
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
js点击事件链接的问题解决
Apr 25 #Javascript
对js关键字命名的疑问介绍
Apr 25 #Javascript
html5+javascript制作简易画板附图
Apr 25 #Javascript
js实现字符串的16进制编码不加密
Apr 25 #Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 #Javascript
jquery操作select大全
Apr 25 #Javascript
jquery自定义下拉列表示例
Apr 25 #Javascript
You might like
php zend 相对路径问题
2009/01/12 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
python快速查找算法应用实例
2014/09/26 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
python银行系统实现源码
2019/10/25 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
模范教师事迹材料
2014/02/10 职场文书
项目经理聘任书
2014/03/29 职场文书
中学生运动会口号
2014/06/07 职场文书
高中班级口号
2014/06/09 职场文书
增员口号大全
2014/06/18 职场文书
母亲去世追悼词
2015/06/23 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL