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 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
Mac下安装vue
Apr 11 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
js实现导航跟随效果
Nov 17 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
js里面的变量范围分享
Jul 18 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
jQuery实现购物车全功能
2021/01/11 jQuery
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
Django中信号signals的简单使用方法
2019/07/04 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
python编程的核心知识点总结
2021/02/08 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
党员民主评议总结
2014/10/20 职场文书
幼儿园感谢信
2015/01/21 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
MYSQL 表的全面总结
2021/11/11 MySQL