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 backgroundImage控制
May 19 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
js实现3D图片展示效果
Mar 09 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
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
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python ldap实现登录实例代码
2016/09/30 Python
python reduce 函数使用详解
2017/12/05 Python
Java及python正则表达式详解
2017/12/27 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
Python字符串的一些操作方法总结
2019/06/10 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
简单了解python协程的相关知识
2019/08/31 Python
基于python操作ES实例详解
2019/11/16 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
Python实现异步IO的示例
2020/11/05 Python
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
教师反腐倡廉演讲稿
2014/09/03 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
拾金不昧表扬信
2015/01/16 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js