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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
JavaScript中import用法总结
2019/01/20 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
面试后感谢信
2014/02/01 职场文书
2014年计生标语
2014/06/23 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
计划生育责任书
2015/05/09 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
经营场所使用证明
2015/06/19 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python