实现的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可以支持多个值的，现在用不着，先算了
分享到：
相关推荐
通过 `Bootstrap-table` 的扩展功能，我们不仅可以对单列进行求和，还可以进行更复杂的计算，如平均值、最大值、最小值等。只需适当调整 `footer-formatter` 函数，即可实现这些扩展功能。 这个 "Boostrap-table...
js某一列值的合计统计，这是对前端某一字段的值进行统计，不是从后台数据库中调取数据。对于某一列值有进行过运算处理过的统计，就很值得一用了。
### JQuery 获取 Table 一列值的方法详解 在 Web 开发中，经常需要处理表格数据，尤其是在需要对表格中的数据进行批量操作时。使用 JQuery 可以非常方便地获取表格（`<table>`）中某一列的所有值。下面将详细介绍...
从提供的文件内容中，我们可以提取以下关于jQuery获取表格中某一行某一列值的知识点： 1. jQuery选择器的使用：在文中，通过使用选择器 $(".div") 找到了包含多个表格的div元素。这说明了jQuery选择器用于选取页面...
本文将介绍如何在 SQL Server 中计算列和平均值。 首先，我们需要了解 Having 子句和 Where 子句的区别。Having 子句用于过滤聚合结果，而 Where 子句用于过滤原始数据。如果你只需要一个表，那么你可以用 Where ...
合计功能是指根据某个列的值来计算总和、平均值、计数等。 实现合计功能的步骤 1. 创建一个 DataGridView控件，并将其绑定到数据源。 2. 在DataGridView的 DataSourceChanged 事件中，通过遍历数据源的每一行，...
下面我们将详细介绍如何通过 JavaScript 来获取 HTML 表格（`<table>`）中的行（`<tr>`）和列（`<td>`）的值。 #### 核心知识点解析 ### 一、HTML 结构解析 首先，让我们来分析一下给定的 HTML 代码结构： ```...
在上面的代码中，我们使用 COLGROUP 和 COL 元素来定义 TABLE 的列。COLGROUP 元素用于定义一组列，而 COL 元素用于定义单个列。我们可以使用 COL 元素的 `id` 属性来控制特定的列。 知识点 4：使用 JavaScript ...
通过JS实现table列的可拖拉，应用在JAVA程序开发中，作为控制使用
// 房间号的合计去掉 getSummaries (param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { if (index === 0) { sums[index] = '总计' } else if (index === 5 ||...
总结来说，Bootstrap Table 的冻结列功能通过结合 `fixedColumns`、`fixedNumber` 和 `fixedRightNumber` 参数，使得在网页上处理大量数据时能更方便地查看和操作表格。通过合理配置这些参数，你可以根据需求定制出...
"表格冻结列原型"是一种在网页设计中常见的功能，它允许用户在滚动浏览长表格时保持某些列固定不动，以便始终可见关键信息。这个原型可能是为开发者或设计师提供了一个直观的示例，以理解如何在实际项目中实现这一...
用js控制table列的显示隐藏 用js控制table列的显示隐藏
在layui table中，自定义列主要是通过设置`cols`参数来实现的。`cols`是一个二维数组，每个子数组代表表格的一行，子数组中的每个元素则代表该行的一个列。列的配置项包括`field`（字段名）、`title`（列标题）、`...
2. **拖动中**：在鼠标移动过程中，通过计算鼠标当前位置与起始位置的差值，判断是否超过阈值以确定是否需要改变列的顺序。如果满足条件，更新 `columns` 数组，将被拖动列移动到新的位置。 3. **拖动结束**：当...
js实现table列头拖拽，。。。。。。
在网页设计中，表格（Table）是一种常见的数据展示方式，特别是在数据量较大或者需要行列结构清晰展示信息的场景。"table 列可左右拖动"的功能使得用户可以根据需要调整列宽，提高用户体验，特别是当表格内容较多，...
在实际开发中，我们经常需要实现表格列的拖拽功能，以方便用户根据需求自定义列的顺序。这个压缩包文件提供的代码示例就是关于如何在 ElementUI 的 Table 组件中实现这一功能的。 首先，我们要理解 ElementUI 的 ...
这个"bootstrap-table-冻结列样例"是关于如何在Bootstrap Table中实现列冻结功能的一个实例。在网页设计中，特别是处理大数据表格时，冻结列是一项实用的功能，它允许用户在滚动表格时始终保持某些列（通常是标题或...
在之前做过的一个web项目中，前端表格是基于jQuery和Bootstrap Table实现的，要求能利用拖动改变列宽。Bootstrap Table可拖动列，需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-...