用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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
微信小程序 教程之模板
Oct 18 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
js实现网页定位导航功能
Mar 07 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 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获取某个目录大小的代码
2008/09/10 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
ie focus bug 解决方法
2009/09/03 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
js Math 对象的方法
2013/09/01 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
Cython 三分钟入门教程
2009/09/17 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
机关门卫岗位职责
2013/12/30 职场文书
企业党员一句话承诺
2014/05/30 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
python中tkinter复选框使用操作
2021/11/11 Python
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫