想把一个表格的最下面添加一个合计行,有很多种实现方式,可以在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一下就可以了