用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 相关文章推荐
写自已的js类库需要的核心代码
Jul 16 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
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的类 功能齐全的发送邮件类
2006/10/09 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
python list语法学习(带例子)
2013/11/01 Python
Python 类的继承实例详解
2017/03/25 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
python爬虫如何解决图片验证码
2021/02/14 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
电气专业推荐信范文
2013/11/18 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
安全温馨提示语大全
2015/07/14 职场文书
公司员工奖惩制度
2015/08/04 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Python 视频画质增强
2022/04/28 Python
Python实现双向链表
2022/05/25 Python