用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 面向对象的5钟写法
Jul 31 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
javascript求日期差的方法
Mar 02 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
实用的Vue开发技巧
May 30 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
js传值 判断
2006/10/26 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python实现的计算器功能示例
2018/04/26 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
酒店保安领班职务说明书
2014/03/04 职场文书
市场调查策划方案
2014/06/10 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2014年教学工作总结
2014/11/13 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
高一语文教学反思
2016/02/16 职场文书