用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控制框架刷新
Aug 01 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
javascript实现京东快递单号的查询效果
Nov 30 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中Date获取时间不正确怎么办
2008/06/05 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
WebPack基础知识详解
2017/01/16 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
Python简单生成8位随机密码的方法
2017/05/24 Python
Python List cmp()知识点总结
2019/02/18 Python
python调用外部程序的实操步骤
2019/03/04 Python
python基于socket函数实现端口扫描
2020/05/28 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
python操作链表的示例代码
2020/09/27 Python
用python制作个音乐下载器
2021/01/30 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
英国门把手公司:Door Handle Company
2019/05/12 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
公积金转移接收函
2014/01/11 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
销售提升方案
2014/06/07 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Python 中的 copy()和deepcopy()
2021/11/07 Python
golang使用map实现去除重复数组
2022/04/14 Golang