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控制表格隔行变色
Jun 26 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
jquery事件与绑定事件
Mar 16 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
Vue实现多标签选择器
Nov 28 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
使用React代码动态生成栅格布局的方法
May 24 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自定义函数之递归删除文件及目录
2010/08/08 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
AngularJS实现网站换肤实例
2021/02/19 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
python飞机大战游戏实例讲解
2020/12/04 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
幼儿园元旦亲子活动方案
2014/02/17 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
Python合并pdf文件的工具
2021/07/01 Python
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android
MySQL池化框架学习接池自定义
2022/07/23 MySQL