使用js简单实现table的合计功能,很实用。

 现在很多的项目中都需要对table进行合计的功能。在这里分享下我的方法。

 页面是使用layUI简单制作的table，贴下jsp页面

 <table class="layui-table" id="testTable">
    <colgroup>
      <col width="150">
      <col width="150">
      <col width="200">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>单位名称</th>
        <th>部门1人数</th>
        <th>部门2人数</th>
        <th>部门3人数</th>
      </tr> 
    </thead>
    <tbody>
      <tr>
        <td>单位1</td>
        <td>13</td>
        <td>12</td>
        <td>34</td>
      </tr>
      <tr>
        <td>单位2</td>
        <td>34</td>
        <td>12</td>
        <td>34</td>
      </tr>
      <tr>
        <td>单位3</td>
        <td>34</td>
        <td>12</td>
        <td>0</td>
      </tr>
      <tr>
        <td>单位4</td>
        <td>23</td>
        <td>45</td>
        <td>23</td>
      </tr>
      <tr>
        <td>单位5</td>
        <td>3</td>
        <td>45</td>
        <td>0 </td>
      </tr>
      <tr>
        <td>单位5</td>
        <td>3</td>
        <td>45</td>
        <td>0 </td>
      </tr>
      <tr class="count">
        
      </tr>
    </tbody>
  </table>

页面最后添加了一个空行用来做页面的合计功能，使用js来计算行列。

$(function(){
	var table=document.getElementById("testTable");//获取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;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());//获取每一列的值
				sum=sum+a; //计算
		}
		$(".count").append("<td>"+sum+"</td>");//给最后一行添加计算结果列
	}
 });

 原创，转载请注明出处