用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的无缝滚动插件
Aug 02 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
React自定义hook的方法
Jun 25 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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
jQuery中读取json文件示例代码
2013/05/10 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
vue实现登录功能
2020/12/31 Vue.js
Python如何获取系统iops示例代码
2016/09/06 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
中科创达面试题
2016/12/28 面试题
力学专业毕业生自荐信
2013/11/17 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
保护水资源的标语
2014/06/17 职场文书
政协会议宣传标语
2014/10/09 职场文书
2014年卫生工作总结
2014/11/27 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
人事专员岗位职责
2015/02/03 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
房产电话营销开场白
2015/05/29 职场文书
在校证明模板
2015/06/17 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书