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事件实现代码
Mar 12 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
vue界面发送表情的实现代码
Sep 11 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 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
实例解析Array和String方法
2016/12/14 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
python抓取网页图片并放到指定文件夹
2014/04/24 Python
21行Python代码实现拼写检查器
2016/01/25 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
python manage.py runserver流程解析
2019/11/08 Python
python设置环境变量的作用整理
2020/02/17 Python
python 制作网站小说下载器
2021/02/20 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
生物科学系大学生的自我评价
2013/12/20 职场文书
运动会广播稿60字
2014/01/15 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
活动简报范文
2015/07/22 职场文书
谢师宴家长致辞
2015/07/27 职场文书
《实心球》教学反思
2016/02/23 职场文书
Python 正则模块详情
2021/11/02 Python