用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延迟加载
Mar 09 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
vue实现抽屉弹窗效果
Nov 15 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
php字符串截取问题
2006/11/28 PHP
PHP insert语法详解
2008/06/07 PHP
PHP 输出缓存详解
2009/06/20 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
Ext 今日学习总结
2010/09/19 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
前端性能优化及技巧
2016/05/06 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
js实现小时钟效果
2020/03/25 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
python的列表List求均值和中位数实例
2020/03/03 Python
python实现简单的学生管理系统
2021/02/22 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
法律专业个人实习自我鉴定
2013/09/23 职场文书
计算机专业个人简短的自我评价
2013/10/23 职场文书
大学毕业感言100字
2014/02/03 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
班风口号
2014/06/18 职场文书
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers
MySQL自定义函数及触发器
2022/08/05 MySQL