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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
js DOM的学习笔记
Dec 22 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
JS前端加密算法示例
Dec 22 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 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
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
sublime text 3配置使用python操作方法
2017/06/11 Python
python实现杨辉三角思路
2017/07/14 Python
python3大文件解压和基本操作
2017/12/15 Python
TensorFlow实现创建分类器
2018/02/06 Python
Python callable()函数用法实例分析
2018/03/17 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
python实现感知机模型的示例
2020/09/30 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
物流管理毕业生自荐信范文
2014/03/15 职场文书
带病坚持工作事迹
2014/05/03 职场文书
天坛导游词
2015/02/02 职场文书
英语教师个人工作总结
2015/02/09 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
js基础语法与maven项目配置教程案例
2021/07/15 Javascript