Jquery、js计算table行合计

原创 2014年08月16日 11:41:15

计算table的行合计比计算列合计容易的多,这里给出两种方法。

方法一:

核心算法:
利用jquery选择器,选中table一行记录,对选中的每一行记录对象执行each访问方法,取得每一列的值,将其相加即的行合计。
demo:
function countRowTotal1() {
	
	$('#mytable tr').each(function() {
		var rowTotal = 0;
		$(this).find('td').each(function() {
			rowTotal += parseFloat($(this).text());
		});
//	alert(rowTotal);
	//将一行的结果,写入合计列,这里直接追加到列尾
		$(this).append('<td>'+rowTotal+'</td>');
	});
}

方法二:

核心算法:
利用jquery选择器,选中table一行记录,每次取得一行记录,利用正则表达式拆分各列得到数组,这里需要注意去除元素首位空白字符,再将数组元素相加即的行合计。
demo:
//每次取一行数据,再用正则表达式拆分
function countRowTotal2() {
	
	$('#mytable tr').each(function() {
		var rowTotal = 0;
		var row2 = trim($(this).text()).split(/\n|\r\n/);//innerText: "11	12	13	14", 必须要去除首位空白符
//		alert(row2.length);				
		for (var i=0; i<row2.length; i++) {
			var temp= trim(row2[i]);
//			alert(temp);
			rowTotal += parseFloat(temp);
		}
//		alert(rowTotal);
		//将一行的结果,写入合计列,这里直接追加到列尾
		$(this).append('<td>'+rowTotal+'</td>');


	});
}	
	
function trim(str){ //删除左右两端的空格
   return str.replace(/(^\s*)|(\s*$)/g, "");
}


table:

<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>
</table>

效果图:



Jquery、js计算table列合计

利用Jquery选择器,计算table中的某一列,某一行的合计,非常方便。xia

封装表格table列求和方法

DOCTYPE html> html> head> title>title> head> body> table width="200" border="0" id="table"...

JQuery Easy UI datagrid中使用合计行

datagrid中可以使用合计行显示汇总信息,合计行可以是多行,如下图所示: 合计行的数据由datagrid的数据源提供,如下所示: Js代码   {   "total": 1,  ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

js 实现几个数字相加得到一个总数

function GetToTalPrice(){        var jcf=document.getElementById("jcf").value;        jcf1=parseI...

springmvc 下拉框联动

最近接触到,下拉列表联动的小功能(ie,谷歌,QQ这三个浏览器已经测试,其他的没弄,有谁测过其他的可以反应一下,谢谢),自己研究了一下,下面贴一下代码和思路吧 springmvc的框架 东西很简单...

利用HTML5+的API实现基于MUI的文件上传

项目中需要用到图片上传,昨天搞整了一下,对我这个菜鸟来说,还是有很多值得注意的地方。        h5+提供了可以调用原生安卓API的功能,当然也能调用camera。需要注意的是,拍照后的保存...

js/Jquery table 内部控件计算和tr的生成

这种table + js的计算大家都不陌生,无论是做门户网站的、还是做业务系统的经常会遇到这些东西。关于这种统计的计算大家应该都会用前端控制吧,有点就不说了,控制的代码相对比较简单。 fun...

利用jquery-latest.js实现合并table多列重复行

$(function () { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了j...
  • lybwwp
  • lybwwp
  • 2014年03月24日 19:13
  • 6683

JQUERY冻结table行或列js

freezeTable.js/* * 锁定表头和列 * * 参数定义 * table - 要锁定的表格元素或者表格ID * freezeRowNum - 要锁定的前几行行数,如果行...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery、js计算table行合计
举报原因:
原因补充:

(最多只允许输入30个字)