用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 相关文章推荐
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
JavaScript常用工具函数大全
May 06 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 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
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
javascript轮播图算法
2016/10/21 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
房地产广告词大全
2014/03/19 职场文书
求职信范文大全
2014/05/26 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
学校食堂管理制度
2015/08/04 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL