实现的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可以支持多个值的，现在用不着，先算了
分享到：
相关推荐
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/官方文档，对表格的列数据进行求和等操作。
js某一列值的合计统计，这是对前端某一字段的值进行统计，不是从后台数据库中调取数据。对于某一列值有进行过运算处理过的统计，就很值得一用了。
使用jquery获取table一列所有的值用于操作
主要介绍了jQuery获取table下某一行某一列的值实现代码的相关资料,需要的朋友可以参考下
通过JS实现table列的可拖拉，应用在JAVA程序开发中，作为控制使用
// 房间号的合计去掉 getSummaries (param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { if (index === 0) { sums[index] = '总计' } else if (index === 5 ||...
用js控制table列的显示隐藏 用js控制table列的显示隐藏
js实现table列头拖拽，。。。。。。
用于layui table 自定义列，保存table模板
bootstrap-table冻结列例子
1.附件内的源码是，是vue 和elementui实现table内的列可以随意拖拽的效果的代码。该代码在我的实际项目中已经应用。 2.table列的拖拽功能实现的核心就是改变 “表头列在数组中的位置”
table 列可左右拖动，随着内容增多，会出现横拉条，兼容谷歌核心和IE8以上浏览器。
js获取table 中 tr td的值的实例,有需要的朋友可以下下来参考
在之前做过的一个web项目中，前端表格是基于jQuery和Bootstrap Table实现的，要求能利用拖动改变列宽。Bootstrap Table可拖动列，需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-...
在 Oracle 数据库中，我们可以使用 update 语句来修改某一列的值根据另一列的值。例如，在学生信息表中，我们可以根据学生的考核规则来修改其成绩。 以下是根据给定的文件信息所生成的知识点： 1. Oracle 数据库...
css锁定table的行与列,简单方便css锁定table的行与列,简单方便
BootStrap-table 表格固定列，固定左侧列以及右侧列，可以固定特定的列，fixedColumns: true, fixedNumber: 2,fixedRightNumber:1，值可以自定义，一定要使用配套(压缩包就是配套的相关文件)的内容，否则会出现一些...
vue table 列拖拽排序例子
js控制隐藏显示table特定列，word文档中有源码实例。
自己使用，该附件里的代码已经实现了使用vue 及elementui的table列的拖动功能。