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 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
three.js加载obj模型的实例代码
Nov 10 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 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入门小知识
2008/03/24 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
javascript判断office版本示例
2014/04/11 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
Vue实现验证码功能
2019/12/03 Javascript
跟老齐学Python之list和str比较
2014/09/20 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python中GIL的使用详解
2018/10/03 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
python 从list中随机取值的方法
2020/11/16 Python
2014大学生全国两会学习心得体会
2014/03/13 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
公司股东合作协议书
2014/09/14 职场文书
安全生产月标语
2014/10/07 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
工作态度怎么写
2015/06/25 职场文书