`
zhsq_java
  • 浏览: 61644 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

在前台计算table列的合计值

    博客分类:
  • JS
阅读更多
实现的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可以支持多个值的,现在用不着,先算了
分享到:
评论

相关推荐

    Boostrap-table求和合计.rar

    通过 `Bootstrap-table` 的扩展功能,我们不仅可以对单列进行求和,还可以进行更复杂的计算,如平均值、最大值、最小值等。只需适当调整 `footer-formatter` 函数,即可实现这些扩展功能。 这个 "Boostrap-table...

    js某一列值的合计统计

    js某一列值的合计统计,这是对前端某一字段的值进行统计,不是从后台数据库中调取数据。对于某一列值有进行过运算处理过的统计,就很值得一用了。

    JQuery获取table一列值

    ### JQuery 获取 Table 一列值的方法详解 在 Web 开发中,经常需要处理表格数据,尤其是在需要对表格中的数据进行批量操作时。使用 JQuery 可以非常方便地获取表格(`&lt;table&gt;`)中某一列的所有值。下面将详细介绍...

    jQuery获取table下某一行某一列的值实现代码

    从提供的文件内容中,我们可以提取以下关于jQuery获取表格中某一行某一列值的知识点: 1. jQuery选择器的使用:在文中,通过使用选择器 $(".div") 找到了包含多个表格的div元素。这说明了jQuery选择器用于选取页面...

    如何在SQL Server计算列和平均值

    本文将介绍如何在 SQL Server 中计算列和平均值。 首先,我们需要了解 Having 子句和 Where 子句的区别。Having 子句用于过滤聚合结果,而 Where 子句用于过滤原始数据。如果你只需要一个表,那么你可以用 Where ...

    js获取table行 列 的值

    下面我们将详细介绍如何通过 JavaScript 来获取 HTML 表格(`&lt;table&gt;`)中的行(`&lt;tr&gt;`)和列(`&lt;td&gt;`)的值。 #### 核心知识点解析 ### 一、HTML 结构解析 首先,让我们来分析一下给定的 HTML 代码结构: ```...

    js控制隐藏显示table特定列

    在上面的代码中,我们使用 COLGROUP 和 COL 元素来定义 TABLE 的列。COLGROUP 元素用于定义一组列,而 COL 元素用于定义单个列。我们可以使用 COL 元素的 `id` 属性来控制特定的列。 知识点 4:使用 JavaScript ...

    table 列值可变大小

    通过JS实现table列的可拖拉,应用在JAVA程序开发中,作为控制使用

    vue element-ui中table合计指定列求和实例

    // 房间号的合计去掉 getSummaries (param) { const { columns, data } = param const sums = [] columns.forEach((column, index) =&gt; { if (index === 0) { sums[index] = '总计' } else if (index === 5 ||...

    bootstraptable冻结列例子.doc

    总结来说,Bootstrap Table 的冻结列功能通过结合 `fixedColumns`、`fixedNumber` 和 `fixedRightNumber` 参数,使得在网页上处理大量数据时能更方便地查看和操作表格。通过合理配置这些参数,你可以根据需求定制出...

    datagridview带合计功能

    合计功能是指根据某个列的值来计算总和、平均值、计数等。 实现合计功能的步骤 1. 创建一个 DataGridView控件,并将其绑定到数据源。 2. 在DataGridView的 DataSourceChanged 事件中,通过遍历数据源的每一行,...

    table 冻结列原型

    "表格冻结列原型"是一种在网页设计中常见的功能,它允许用户在滚动浏览长表格时保持某些列固定不动,以便始终可见关键信息。这个原型可能是为开发者或设计师提供了一个直观的示例,以理解如何在实际项目中实现这一...

    bootstrap控制table列的显示隐藏

    用js控制table列的显示隐藏 用js控制table列的显示隐藏

    用于layui table 自定义列

    在layui table中,自定义列主要是通过设置`cols`参数来实现的。`cols`是一个二维数组,每个子数组代表表格的一行,子数组中的每个元素则代表该行的一个列。列的配置项包括`field`(字段名)、`title`(列标题)、`...

    vue Element ui实现table列拖动效果

    2. **拖动中**:在鼠标移动过程中,通过计算鼠标当前位置与起始位置的差值,判断是否超过阈值以确定是否需要改变列的顺序。如果满足条件,更新 `columns` 数组,将被拖动列移动到新的位置。 3. **拖动结束**:当...

    js实现table列头拖拽

    js实现table列头拖拽,。。。。。。

    table 列可左右拖动

    在网页设计中,表格(Table)是一种常见的数据展示方式,特别是在数据量较大或者需要行列结构清晰展示信息的场景。"table 列可左右拖动"的功能使得用户可以根据需要调整列宽,提高用户体验,特别是当表格内容较多,...

    elementui table列的拖拽功能

    在实际开发中,我们经常需要实现表格列的拖拽功能,以方便用户根据需求自定义列的顺序。这个压缩包文件提供的代码示例就是关于如何在 ElementUI 的 Table 组件中实现这一功能的。 首先,我们要理解 ElementUI 的 ...

    bootstrap-table-冻结列样例

    这个"bootstrap-table-冻结列样例"是关于如何在Bootstrap Table中实现列冻结功能的一个实例。在网页设计中,特别是处理大数据表格时,冻结列是一项实用的功能,它允许用户在滚动表格时始终保持某些列(通常是标题或...

    bootstrap table实现列拖动.rar

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽。Bootstrap Table可拖动列,需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-...

Global site tag (gtag.js) - Google Analytics