用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中String和StringBuffer的速度之争
Apr 01 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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(4) php 函数 补充2
2010/02/15 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
浅谈Python中的数据类型
2015/05/05 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
python实现弹跳小球
2019/05/13 Python
OpenCV 边缘检测
2019/07/10 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
Python函数中的可变长参数详解
2019/09/12 Python
python中return的返回和执行实例
2019/12/24 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
经典的毕业生自荐信范文
2014/04/14 职场文书
环保倡议书100字
2014/05/15 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
节约粮食标语
2014/06/18 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
2014年秘书工作总结
2014/11/25 职场文书
单位实习介绍信
2015/05/05 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书