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> </td>
</tr>
</c:forEach>
<tr align="center">
<td class=listContent>合计</td>
<c:forEach begin="1" end="11">
<td> </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>