在前台计算table列的合计值

最新推荐文章于 2022-08-03 10:12:43 发布

zhangsiqi1985

最新推荐文章于 2022-08-03 10:12:43 发布

阅读量1.3k

点赞数

分类专栏： JS 文章标签： html table 合计列

本文链接：https://blog.youkuaiyun.com/zhangsiqi1985/article/details/84534174

版权

JS 专栏收录该内容

7 篇文章

订阅专栏

实现的js方法：


function totalTable(tbl){
	var allRows = tbl.rows; //所有的行
	var allCells = new Array(); //所有的单元格
	var totalCells = new Array(); //所有的合计单元格
	for(var ri=0; ri < allRows.length; ri++){
		var cellsInRow = allRows[ri].cells;
		for(var ci=0; ci<cellsInRow.length; ci++){
			allCells.push(cellsInRow[ci]);
			if(cellsInRow[ci].getAttribute("totalfor") && cellsInRow[ci].getAttribute("totalfor") != ""){
				totalCells.push(cellsInRow[ci]);
			}
		}
	}

	for(var j=0; j<totalCells.length; j++){
		var total1 = 0;
		for(var k=0; k<allCells.length; k++){
			if(totalCells[j].getAttribute("totalfor") === allCells[k].getAttribute("totalgroup")){
				var v = parseFloat(allCells[k].innerHTML);
				if(!isNaN(v)){
					total1 += v;
				}
			}
		}
		totalCells[j].innerHTML = total1;
	}
}

在调用这个方法之前要在要合计的td标签上加上自定义标签totalgroup，在合计的td标签上加上自定义标签totalfor，并且两者要相互对应。以下为jsp代码片段。


......
<table id="tableTbl">
......
<tbody id="tbody">
		                  <c:forEach items="${datas}" var="d">
			                  <tr>
			                    <td><app:dictname dictid="${d.townId}" disfields="dictcode dictname" /></td>
			                    <td><app:dictname dictid="${d.reason}"/></td>
			                    <td totalgroup="cntYW">${d.cntYW}</td>
			                    <td totalgroup="cntSX">${d.cntSX}</td>
			                    <td totalgroup="cntYY">${d.cntYY}</td>
			                    <td totalgroup="cntZZ">${d.cntZZ}</td>
			                    <td totalgroup="cntWL">${d.cntWL}</td>
			                    <td totalgroup="cntHX">${d.cntHX}</td>
			                    <td totalgroup="cntSW">${d.cntSW}</td>
			                    <td totalgroup="cntLS">${d.cntLS}</td>
			                    <td totalgroup="cntDL">${d.cntDL}</td>
			                    <td totalgroup="cntStu">${d.cntStu}</td>
			                  </tr>
		                  </c:forEach>
		                  <tr>
		                  	<td colspan="2">合计</td>
		                  	<td totalfor="cntYW"></td>
		                  	<td totalfor="cntSX"></td>
		                  	<td totalfor="cntYY"></td>
		                  	<td totalfor="cntZZ"></td>
		                  	<td totalfor="cntWL"></td>
		                  	<td totalfor="cntHX"></td>
		                  	<td totalfor="cntSW"></td>
		                  	<td totalfor="cntLS"></td>
		                  	<td totalfor="cntDL"></td>
		                  	<td>${stuAllCount}</td>
		                  </tr>
	                  </tbody>
......
</table>
......

然后在body的onload里面调用就好了


<body onload="totalTable(document.getElementById('tableTbl'));">

还想做成totalgroup可以支持多个值的，现在用不着，先算了