js 统计表格加总数据

           

          使用js统计页面表格中的数据，比在action层中简单，别且快捷，改起来方便，下面是我们项目中的一个例子。需要在别人已有的表格基础上作加总行和列的数据。

 

页面代码：已有表格的基础上加最右边的一行和最下面的一列 ，关键代码见js

 

 

 <table width="700" border="1" align="center" cellspacing="0" cellpadding="1">
  <tbody id="list">
  <tr align="center">
   <td colspan="12" style="font-size:16px;line-height:30px;BACKGROUND-COLOR:#bddbf7"><b><c:out value="${statisticTime}"/> 各地市<c:out value="${title}"/>情况（单位：次）</b></td>
  </tr>
  <tr align="center">
   <td class=listContent>
    业务类型\地市
   </td>
   <c:forEach items="${localNet}" var="area">
    <td class=listContent><c:out value="${area}"/></td>
   </c:forEach>
   <td class=listContent>合计</td>
  </tr>
  <c:forEach items="${operatorList}" var="operator">
   <tr align="center">
    <td class=listContent><c:out value="${operator}"/></td>
    <c:forEach items="${countList}" var="count">
     <c:if test="${count.bizCatalogName == operator}">
      <td><c:out value="${count.count}"/></td>
     </c:if>
    </c:forEach>
    <td>&nbsp</td>
   </tr>
  </c:forEach>
  <tr align="center">
   <td class=listContent>合计</td>
   <c:forEach begin="1" end="11">
    <td>&nbsp</td>
   </c:forEach>
  </tr>
  </tbody>
 </table>	

 

js:

 

<script type="text/javascript">
/*统计最后一列合计(加总行数据)*/
function autoTableCompute()
{
	var list = document.getElementById("list");
	if(list!=null)
	{
	/*得到tbody所有的行*/
		var m = list.childNodes;
		var mlen = m.length;
		for(var x=2;x<mlen-1;x++){
		/*得到每一行所有的列*/
			var n = m[x].childNodes;
			var nlen1 = n.length;
			var t = 0;
			for(var i=1;i<nlen1-1;i++){
				t = t+1*n[i].innerHTML;
			}
			n[nlen1-1].innerText=t;
		}
	}
	
}
/*统计最后一行合计(加总列数据)*/
function autoTableCompute2()
{
	var list = document.getElementById("list");
	if(list!=null)
	{
		var t = 0;
		var m = list.childNodes;
		var mlen = m.length;//27
		/*最后一行*/
		var s=m[mlen-1].childNodes;
		for(var k=0;k<s.length-1;k++)
		{
			for(var x=2;x<mlen-1;x++)
			{
				var n = m[x].childNodes;
				var nlen1 = n.length;//12
				t=t+1*n[k+1].innerHTML;
				
			}
			s[k+1].innerHTML=t;
			t=0;
		}	
	}
}
/*统计最后一列合计*/
autoTableCompute();
/*统计最后一行合计*/
autoTableCompute2();
</script>