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访问XML数据的实例
Dec 27 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
基于vue.js实现购物车
Jan 15 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实现模拟http请求的方法分析
2017/12/20 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
Python 递归函数详解及实例
2016/12/27 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
英语专业毕业生自我鉴定
2013/11/09 职场文书
生物学学生自我评价
2014/01/17 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
信息总监管理职责范本
2014/03/08 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
捐助感谢信
2015/01/22 职场文书
德能勤绩工作总结
2015/08/11 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python