用Jquery选择器计算table中的某一列某一行的合计


Posted in Javascript onAugust 13, 2014

利用Jquery选择器,计算table中的某一列,某一行的合计,非常方便。下面以计算行合计为例:

核心算法:

$('#tableId tr').each(function() { 
$(this).find('td:eq(columnIndex)').each(function() { 
totalAmount += parseFloat($(this).text());
})
});

下面是案例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Jquery计算table行合计</title> 
<script id="jquery_183" type="text/javascript" class="library" src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

var totalRow = 0 
$('#mytable tr').each(function() { 
$(this).find('td:eq(2)').each(function(){ 
totalRow += parseFloat($(this).text()); 
}); 
}); 

$('#totalRow').append('<td>合计</td><td></td><td>'+totalRow+'</td><td></td>'); 
}); 
</script> 

</head> 
<body style="width:100%; height:100%;"> 
<table id="mytable" border="1" width="37%"> 
<thead> 
</thead> 
<tr> 
<td width="63" >11</td> 
<td width="68" >12</td> 
<td width="62" >13</td> 
<td width="75" >14</td> 
</tr> 
<tr> 
<td width="63" >21</td> 
<td width="68" >22</td> 
<td width="62" >23</td> 
<td width="75" >24</td> 
</tr> 
<tr id="totalRow"></tr> 
</table> 
</body> 
</html>

效果图:

用Jquery选择器计算table中的某一列某一行的合计

Javascript 相关文章推荐
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
红米手机抢购的js代码
Mar 10 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 #Javascript
js中string转int把String类型转化成int类型
Aug 13 #Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 #Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 #Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 #Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 #Javascript
用javascript读取xml文件读取节点数据
Aug 12 #Javascript
You might like
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
详解Python3定时器任务代码
2019/09/23 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Python的历史与优缺点整理
2020/05/26 Python
如何让python的运行速度得到提升
2020/07/08 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
联想中国官方商城:Lenovo China
2017/10/18 全球购物
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
党员组织关系介绍信
2014/02/13 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
工地材料员岗位职责
2015/04/11 职场文书
Golang 对es的操作实例
2022/04/20 Golang
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers