用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 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
jQuery使用手册之二 DOM操作
Mar 24 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
javascript实现移动端轮播图
Dec 09 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php的array_multisort()使用方法介绍
2012/05/16 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
python实现的分层随机抽样案例
2020/02/25 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
护理中职生求职信范文
2014/02/24 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
公司借条范本
2015/05/25 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
golang 如何用反射reflect操作结构体
2021/04/28 Golang