用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据option的value值快速设定初始的selected选项
Aug 13 Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
jquery里的each使用方法详解
2010/12/22 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
python实现log日志的示例代码
2018/04/28 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
小学教师管理制度
2014/01/18 职场文书
政风行风建设责任书
2014/07/23 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
临时用工协议书范本
2014/10/29 职场文书
股权转让协议范本
2014/12/07 职场文书
邀请函怎么写
2015/01/30 职场文书
怎样写好工作计划
2019/04/10 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
python实现简单的三子棋游戏
2022/04/28 Python