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 12 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
中止javascript执行的方法
Feb 14 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
JavaScript实现简单计时器
Jun 22 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中preg_match的isU代表什么意思
2015/10/01 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
python中元类用法实例
2014/10/10 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python实现二叉查找树实例代码
2018/02/08 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
django数据库自动重连的方法实例
2019/07/21 Python
Python dict的常用方法示例代码
2020/06/23 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
大专学生推荐信范文
2013/11/19 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
单位在职证明范本
2014/01/09 职场文书
优秀公益广告词大全
2014/03/19 职场文书
市场营销工作计划书
2014/05/06 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
上课说话检讨书
2015/01/27 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
酒店温馨提示语
2015/07/14 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
Python中glob库实现文件名的匹配
2021/06/18 Python
python简单验证码识别的实现过程
2021/06/20 Python