用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 Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 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中include()与require()的区别说明
2010/03/10 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
python  logging日志打印过程解析
2019/10/22 Python
python 负数取模运算实例
2020/06/03 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
综合测评自我鉴定
2013/10/08 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
主题团日活动总结
2014/06/25 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL