[前端]前端统计功能实现方案

避免后端做太多的计算类的工作，则在前端进行统计操作。【如果您用的vue或者react等框架，请绕路~】

1.纯js 简单实现

table 加一个 <hr class="count></hr>

 

然后，js脚本如下:

$(function() {
		var table = document.getElementById("changeWidth");//获取table对象
		var rows = table.rows;//获取行对象
		var cells = table.cells;//获取列对象
		var colums = table.rows[0].cells.length;//获取列数
		$(".count").empty();//每次加载时清空小计，防止二次加载数据时出现多行小计
		$(".count").append("<td>小计</td>");
		//这里从列开始遍历，得到的就是每一列的数据
		//如果从行开始遍历，得到的就是每行的数据
		for (var j = 1; j < colums-1; j++) {
			var sum = 0;
			for (var i = 1; i < rows.length - 1; i++) {//从i=1第二行开始去掉表头，rows.length-1结束，去掉合计行
				var a = parseInt(rows[i].cells[j].innerHTML.trim());//获取每一列的值
				console.log(a);
				sum = sum + a; //计算
			}

			$(".count").append("<td>" + sum + "</td>");//给最后一行添加计算结果列
		}
	})

要注意的是  var a = parseInt(rows[i].cells[j].innerHTML.trim()) 确保单元格中没有其他的span一类的标签。如果有，对应的去修改获取方案

另外就是 j 和 i的值，注意去掉你不需要统计的部分。

方案2：使用boostrap的 footerFormatter()方法