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 相关文章推荐
jQuery bind事件使用详解
May 05 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP引用返回用法示例
2016/05/28 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
jquery对table做排序操作的实例演示
2017/08/10 jQuery
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
详解jenkins自动化部署vue
2019/05/14 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python3匿名函数用法示例
2018/07/25 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python psutil模块使用方法解析
2019/08/01 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
Why we need EJB
2016/10/20 面试题
物业管理个人自我评价
2013/11/08 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
酒后驾车标语
2014/06/30 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
技术支持岗位职责
2015/02/13 职场文书
北京青年观后感
2015/06/15 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle