用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 学习之二 属性(类)
Nov 25 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
js动态引入的四种方法
May 05 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
js面向对象方式实现拖拽效果
Mar 03 Javascript
关于Javascript闭包与应用的详解
Apr 22 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中GET变量的使用
2006/10/09 PHP
php array_search() 函数使用
2010/04/13 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
php存储过程调用实例代码
2013/02/03 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
高一生物教学反思
2014/01/17 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书