[前端]前端统计功能实现方案
  OIW0KlaMcRRl 2023年11月28日 11 0


避免后端做太多的计算类的工作,则在前端进行统计操作。【如果您用的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()方法

 

 

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月28日 0

暂无评论

推荐阅读
OIW0KlaMcRRl