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 select常用操作控制代码
Mar 16 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 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图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
中止javascript执行的方法
2014/02/14 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
Bootstrap基础学习
2015/06/16 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
python 为什么说eval要慎用
2019/03/26 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Python新手学习标准库模块命名
2020/05/29 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
CSS3 边框效果
2019/11/04 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
银行竞聘演讲稿范文
2014/04/23 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL