前端表格通过js计算生成合计行

想把一个表格的最下面添加一个合计行，有很多种实现方式，可以在sql中通过sum函数计算得到结果返回后台再传给前端填充，也可以在后台通过sql查出的基础数据做累加，再传给前端。但是这两种方法都比较麻烦，数据量少还行，数据要是多了，逻辑写的让人头皮发麻。所以可以通过前端获取表格中的信息，直接循环生成合计行。

首先在页面定义一个空表格

<div id="main1right" style="width: 50%;float:right;">
	<table id="tableCostStr" class="tablelist">
	</table>
</div>

我是在ajax的回调函数中，填充表格内容的。

$.ajax({
	   	type: "post",
	   	url: "${adminPath }/aaa/bbb",
	   	dataType:"json",
	   	async:false,
	   	data: {"reportYear":reportYear,"reportType":reportType},
	   	success:function(result){
	   	    if(result.length>0){
	   		   $("#tableCostStr").append("<thead><tr><th></th><th>材料费</th><th>设备费 
                    </th><th>人员费</th></tr></thead>");
	   		        for(var i=0;i<result.length;i++){   			            		 
                        $("#tableCostStr").append("<tbody><tr><td>"+result[i].companyName
	   			            		+"</td><td>"+result[i].materialFee
	   			            		+"</td><td>"+result[i].deviceFee
	   			            		+"</td><td>"+result[i].staffFee
	   			            		+"</td></tr></tbody>");
	   			            	}
	   		            $("#tableCostStr").append("<tr id='count1'></tr>");
                        //获取table对象
	   		            var table=document.getElementById("tableCostStr");
                        //获取行对象		   		 	   	
                        var rows=table.rows;
                        //获取列对象
		   		 	   	var cells=table.cells;
                        //获取列数
		   		 	   	var colums = table.rows[0].cells.length;
                        //每次加载时清空最后一列，防止二次加载数据时出现多行合计	
		   		 	   	$("#count1").empty();
		   		 	   	$("#count1").append("<td>合计</td>");
		   		 	   	//这里从列开始遍历，得到的就是每一列的数据
		   		 	   	//如果从行开始遍历，得到的就是每行的数据
		   		 	   	for(var j=1;j<colums;j++){
		   		 	   		var sum=0;
                            //从i=1第二行开始去掉表头，rows.length-1结束，去掉合计行
		   		 	   		for(var i=1;i<rows.length-1;i++){
                            //获取每一列的值,float,精度
		   		 	   		var a =parseFloat(rows[i].cells[j].innerHTML.trim());
		   		 	   		sum=sum+a; //计算
		   		 	   		}
		   		 	   	$("#count1").append("<td>"+sum+"</td>");//给最后一行添加计算结果列
		   		 	   			}
	   		            	}
	   		            }	
	   		        });

在生成表格之后，直接获取表格内容，循环计算，在最后一行append一下就可以了