用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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
js实现不重复导入的方法
Mar 02 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python使用requests发送POST请求实例代码
2018/01/25 Python
python3 爬取图片的实例代码
2018/11/06 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
销售行业个人求职自荐信
2013/09/25 职场文书
护士自我评价
2014/02/01 职场文书
超市总经理岗位职责
2014/02/02 职场文书
校园文化标语
2014/06/18 职场文书