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 相关文章推荐
javascript 多级checkbox选择效果
Aug 20 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
Extjs学习笔记之六 面版
Jan 08 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 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将数据导入到Foxmail的实现代码
2010/09/05 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
回顾Javascript React基础
2019/06/15 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
python中的编码知识整理汇总
2016/01/26 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
深入浅析python with语句简介
2018/04/11 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python socket聊天脚本代码实例
2020/01/02 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
求职信格式范本
2013/11/15 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
《老山界》教学反思
2014/04/08 职场文书
合作经营协议书范本
2014/09/16 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
趣味运动会广播稿
2015/08/19 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技