Jquery、js计算table行合计

计算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 合计
个人分类: web前端
想对作者说点什么? 我来说一句

javascript合计table

2015年02月08日 4KB 下载

没有更多推荐了,返回首页

不良信息举报

Jquery、js计算table行合计

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭