JS实现table动态列自动合计

相信大家在项目中总会遇到统计功能（列的合计和行的合计）

下面为大家讲解下table中实现动态列的合计。

上方的统计是我这边的效果图。下面为大家贴上详细的代码

因为系统用的代码比较老旧，这里使用的是Struts框架

事件类别后面的标题是动态显示的，相信这个大家都会使用，就不详细讲解了。

在下方Map里面有个for循环，这个是根据上面的标题，标题有多少个，那就产生多少列，同时依靠J给这些列生成动态的class名称，因为我的列是从第2列开始计算，故这里我的class名称省略掉了0和1

function load(){
        var tab=document.getElementById("tab");
        var rows=tab.rows;
        var baseSum=0;
		var total = rows[1].cells;
        var sum=0;
        for(var i = 2; i < total.length-1; i++){
        	//动态class名
        	var cla = ".sum"+i;
        	var tol = ".total"+i;
        	 $(".sum").each(function(){
    			var base=$(this).find(tol).text();
    				baseSum+=parseInt(base);
    		});
    		
        	$(cla).text(baseSum);
        	baseSum = 0;
        }
        
     }

上方的代码中，document.getElementById("tab");

相信这个代码大家都是知道的，获取table表格。

var rows = tab.rows;

获取table的所有行，这时rows是数字类型

var total = rows[1].cells;

获取第一行列的总计。也就是获取总共多少列。

for(var i = 2; i < total.length-1; i++){
        	//动态class名
        	var cla = ".sum"+i;
        	var tol = ".total"+i;
        	 $(".sum").each(function(){
    			var base=$(this).find(tol).text();
    				baseSum+=parseInt(base);
    		});
    		
        	$(cla).text(baseSum);
        	baseSum = 0;
        }

for循环，从第2列开始循环，因为我的第0列和第1列分别是序号和类别，小于列的总计-1，因为我的最后一列合计是不用统计的，这个只统计第3列至倒数第2列，如果您的需要统计最后一列，把-1去掉即可。

同时，生成动态的class名称，和table里面的class名称一定要对应。

进行each遍历所有的td列进行相加，$(this)，指当前，find(tol)，tol就是你的动态class名，也就是你的需要合计的td。

baseSum，将遍历出来的数值进行相加。最后复制给最后一行的合计，同时把baseSum清零，不然得到的数值就是从第一列一直到最后一列的和，而不是每一列的合