/**
*
* @tableId 表格id
* @numId 显示张数id
* @index 列数
* @first 首次标识
* @obj checkbox对象
*/
function countNum(tableId, numId, index, first,obj) {
var sumStr = document.getElementById(numId);
//当前行进行加减
if (null != obj) {
var num = new Number(obj.parentElement.parentElement.cells[index].innerText);
if (obj.checked) {
sumStr.value = new Number(sumStr.value) + num;
}
else {
sumStr.value = new Number(sumStr.value) - num;
}
}
//遍历所有进行加减
else {
var table = document.getElementById(tableId);
var sum = 0;
var rows = table.rows;
for (i = 1; i < rows.length; i++) {
//判断是否有复选框
var checkObj = rows[i].cells[0].all[0];
var flag = false;
if (null != checkObj
&& typeof checkObj.type != 'undefined'
&& checkObj.type == 'checkbox') {
flag = checkObj.checked;
}
//首次默认计算全部或增加选中的值
if (first || flag) {
var num = new Number(rows[i].cells[index].innerText);
sum = sum + num;
}
}
sumStr.value = sum;
}
}
1. jsp，带复选框
<xmdc:form style="position:relative;top:10px;" id="AEDT_account">
<xmdc:panelGrid columns="10" width="98%" styleClass="content_table"
align="center" columnwidths="4%,6%,4%,8.5%,4%,6%,5%,5.5%,2.5%,4.5%"
columnaligns="right,left,right,left,right,left,right,left,right,left"
columnClasses="content_index,content_body,content_index,content_body,
content_index,content_body,content_index,content_body,content_index,content_body">
<xmdc:outputText value="移交人员"></xmdc:outputText>
<xmdc:panelGroup>
<xmdc:inputText style="width:80px;validator:checkNotNull(移交人员);"
value="#{AddExistDataTransfer.transferBFO.transferOperatorName}"
onchange="reExport();"></xmdc:inputText>
<xmdc:outputText value="*" style="color:red;"></xmdc:outputText>
</xmdc:panelGroup>
<xmdc:outputText value="移交日期"></xmdc:outputText>
<xmdc:panelGroup>
<xmdc:ccbcalendar
value="#{AddExistDataTransfer.transferBFO.transferDate}"
id="transferDate"></xmdc:ccbcalendar>
<xmdc:outputText value="*" style="color:red;"></xmdc:outputText>
</xmdc:panelGroup>
<xmdc:outputText value="签收人员"></xmdc:outputText>
<xmdc:panelGroup>
<xmdc:inputText style="width:80px;validator:checkNotNull(签收人员)"
value="#{AddExistDataTransfer.transferBFO.receiveOperatorName}"
onchange="reExport();"></xmdc:inputText>
<xmdc:outputText value="*" style="color:red;"></xmdc:outputText>
</xmdc:panelGroup>
<xmdc:outputText value="签收人员编号"></xmdc:outputText>
<xmdc:panelGroup>
<xmdc:inputText style="width:100px;validator:checkNotNull(签收人员编号)"
value="#{AddExistDataTransfer.transferBFO.receiveOperatorNo}"
onchange="reExport();"></xmdc:inputText>
<xmdc:outputText value="*" style="color:red;"></xmdc:outputText>
</xmdc:panelGroup>
<xmdc:outputText value="张数"></xmdc:outputText>
<xmdc:inputText id="number" readonly="true" style="width:70px;"></xmdc:inputText>
</xmdc:panelGrid>
<xmdc:panelGrid width="100%">
<xmdc:div styleClass="auto" style="height:375px;width:100%">
<xmdc:dataTable var="row" cellpadding="2" styleClass="sortable"
value="#{AddExistDataTransfer.unTransferExistList}"
style="width:100%" id="countNumT">
<xmdc:column width="4%">
<xmdc:facet name="header">
<xmdc:selectBooleanCheckbox
onclick="selectAll(this);
countNum('AEDT_account:countNumT', 'AEDT_account:number',4,false);">
</xmdc:selectBooleanCheckbox>
</xmdc:facet>
<xmdc:selectBooleanCheckbox value="#{row.select}"
onclick="reExport();
countNum('AEDT_account:countNumT', 'AEDT_account:number',4,false,this);">
</xmdc:selectBooleanCheckbox>
</xmdc:column>
<xmdc:column width="160px">
<xmdc:facet name="header">
<xmdc:outputText value="账号"></xmdc:outputText>
</xmdc:facet>
<xmdc:outputText value="#{row.accountNo}"></xmdc:outputText>
</xmdc:column>
<xmdc:column>
<xmdc:facet name="header">
<xmdc:outputText value="户名"></xmdc:outputText>
</xmdc:facet>
<xmdc:outputText value="#{row.accountName}"></xmdc:outputText>
</xmdc:column>
<xmdc:column>
<xmdc:facet name="header">
<xmdc:outputText value="操作类型"></xmdc:outputText>
</xmdc:facet>
<xmdc:outputText value="#{row.operateType}"></xmdc:outputText>
</xmdc:column>
<xmdc:column>
<xmdc:facet name="header">
<xmdc:outputText value="张数"></xmdc:outputText>
</xmdc:facet>
<xmdc:outputText value="#{row.count}"></xmdc:outputText>
</xmdc:column>
</xmdc:dataTable>
</xmdc:div>
</xmdc:panelGrid>
<xmdc:verbatim>
<script type="text/javascript">
countNum("AEDT_account:countNumT", "AEDT_account:number",4,true);
</script>
</xmdc:verbatim>
</xmdc:form>
2. jsp，不带复选框
<xmdc:form style="position:relative;top:10px;" id="DTRD_account">
<xmdc:panelGrid columns="10" width="98%" styleClass="content_table"
align="center" columnwidths="8%,13%,8%,13%,8%,13%,8%,13%,5%,11%"
columnaligns="right,left,right,left,right,left,right,left,right,left"
columnClasses="content_index,content_body,content_index,content_body,
content_index,content_body,content_index,content_body,content_index,content_body">
<xmdc:outputText value="移交人"></xmdc:outputText>
<xmdc:outputText
value="#{DataTransferReceiveDetail.bfo.transferOperatorName}"></xmdc:outputText>
<xmdc:outputText value="移交日期"></xmdc:outputText>
<xmdc:outputText
value="#{DataTransferReceiveDetail.bfo.transferDate.val}"></xmdc:outputText>
<xmdc:outputText value="签收人员"></xmdc:outputText>
<xmdc:outputText
value="#{DataTransferReceiveDetail.bfo.receiveOperatorName}"></xmdc:outputText>
<xmdc:outputText value="签收日期"></xmdc:outputText>
<xmdc:outputText
value="#{DataTransferReceiveDetail.bfo.receiveDate.val}"></xmdc:outputText>
<xmdc:outputText value="张数"></xmdc:outputText>
<xmdc:inputText id="number" readonly="true"></xmdc:inputText>
</xmdc:panelGrid>
<xmdc:panelGrid width="100%">
<xmdc:div styleClass="auto" style="height:420px;width:100%">
<xmdc:dataTable var="row" cellpadding="0" styleClass="sortable"
value="#{DataTransferReceiveDetail.detailList}" style="width:100%"
id="countNumT">
<xmdc:column width="165px">
<xmdc:facet name="header">
<xmdc:outputText value="账号"></xmdc:outputText>
</xmdc:facet>
<xmdc:outputText value="#{row.accountNo}"></xmdc:outputText>
</xmdc:column>
<xmdc:column>
<xmdc:facet name="header">
<xmdc:outputText value="户名"></xmdc:outputText>
</xmdc:facet>
<xmdc:outputText value="#{row.accountName}"></xmdc:outputText>
</xmdc:column>
<xmdc:column>
<xmdc:facet name="header">
<xmdc:outputText value="操作类型"></xmdc:outputText>
</xmdc:facet>
<xmdc:outputText value="#{row.operateType}"></xmdc:outputText>
</xmdc:column>
<xmdc:column>
<xmdc:facet name="header">
<xmdc:outputText value="张数"></xmdc:outputText>
</xmdc:facet>
<xmdc:outputText value="#{row.count}"></xmdc:outputText>
</xmdc:column>
<xmdc:column>
<xmdc:facet name="header">
<xmdc:outputText value="是否电子审批"></xmdc:outputText>
</xmdc:facet>
<xmdc:outputText value="#{row.echief}"></xmdc:outputText>
</xmdc:column>
</xmdc:dataTable>
</xmdc:div>
</xmdc:panelGrid>
<xmdc:verbatim>
<script type="text/javascript">
countNum("DTRD_account:countNumT", "DTRD_account:number",3,true);
</script>
</xmdc:verbatim>
</xmdc:form>
分享到：
相关推荐
下面我们将详细介绍如何通过 JavaScript 来获取 HTML 表格（`<table>`）中的行（`<tr>`）和列（`<td>`）的值。 #### 核心知识点解析 ### 一、HTML 结构解析 首先，让我们来分析一下给定的 HTML 代码结构： ```...
在使用Vue.js框架开发时，表格的数据计算和展示是常见的需求之一，尤其是在处理业务报表时，对某列数据进行求和是非常重要的功能。本文将介绍如何在Vue项目中实现表格列的求和功能，虽然原项目中使用了element-ui库...
<title>jQuery计算table行合计 <script src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"> $(document).ready(function() { var totalRow = 0; $('#mytable tr').each(function() { $(this)....
例如，如果要计算某一列的总和，可以这样写： ```javascript function summaryFunction(data) { var sum = 0; for (var i = 0; i ; i++) { sum += parseFloat(data[i].column_name); } return "总计: " + sum;...
这样，如果后端已经计算了总和，我们可以直接使用这个值，否则使用 `footerFormatter` 在前端计算。 示例 JSON 结构： ```json { "total": 2, "rows": [ {"id": 1, "categoryid": 11, "money": 100, "creattime...
在本例中，可能涉及到计算表中某一列的总和、平均值等统计指标，或者找出最频繁出现的项。这通常需要在查询过程中使用聚合函数，如SUM、AVG、COUNT、MAX和MIN，它们可以帮助我们了解数据的整体特征。 为了实现这些...
对于计算，JavaScript提供了一系列数学函数，可以用于计算单元格的值，如总和、平均值等。 为了提升用户体验，还可以添加一些视觉效果，如高亮选择的单元格、过渡动画等。CSS3和JavaScript库如jQuery UI或Bootstrap...
在本项目"flexible_table.zip"中，我们探讨了一个基于Vue.js和jQuery（jq）实现的灵活表格，这个表格特别适用于模拟购物车功能，允许用户选择商品并计算总价。下面将详细阐述其中涉及的关键技术点。 1. **Vue.js**...
可以将单选按钮嵌入到表格的某一列中，通过绑定 `v-model` 来控制选中的值，然后根据这个值进行评分计算。 4. **表格内换行**： 在表格单元格中插入换行符（` `）可以实现文本的换行展示。这在处理长文本或者...
在JavaScript和jQuery的世界里，表格（Table）是数据展示的重要工具。本教程将重点讲解如何实现"javascript表格常用操作"，包括"表头排序"、"表头固定"、"列隐藏"、"行隐藏"以及"悬浮变色"等功能。这些功能可以极大...
在实际的开发中，经常需要在表格底部添加统计行，例如计算某列的总和、平均值等。`footerFormatter` 就是 Bootstrap-table 提供的一个功能，用于自定义表格底部（footer）的显示内容，非常适合用来实现统计功能。 `...
**数据统计** 可能涉及计算某一列的总和、平均值等。Webix提供了`dataProcessor`组件，可以配合服务器端进行数据处理。你也可以自定义函数来实现局部统计。例如，可以监听`onAfterLoad`事件，遍历数据集并计算总和：...
JavaScript表格数字加总是一个常见的前端开发任务，尤其在处理数据展示和计算时。在这个范例中，我们将讨论如何使用JavaScript来实现对HTML表格中的数字进行加总，并解决在Internet Explorer浏览器中可能出现的问题...
这条SQL语句将返回`sales`表中的行数、`amount`列的总和、平均值、最大值和最小值。 #### 总结 通过上述介绍和示例，我们可以看出聚合函数在MySQL数据库中是非常有用的工具，可以方便地帮助我们进行数据汇总与分析...
这里的grid表格控件可能不仅支持基本的数据列展示，还包含了合计行功能，这意味着它能够自动计算一列或多列的总和或其他统计值，如平均值或最大值，这对于数据分析和报告制作十分有用。 3. **Select的JavaScript...
`getSum()`函数可以用于计算指定列的总和，并将结果显示在文本框中。这一过程涉及到遍历所有相关的单元格，提取数值信息，并执行数学运算。 ### 综合运用 将以上技术结合使用，可以构建出功能强大的表格操作界面。...
**解析**：这里我们使用`SUM(column_name)`函数来计算每个分组中`column_name`列的值的总和。 ##### 示例3：按列进行分组，并计算每个分组中的平均值 ```sql SELECT column_name, AVG(column_name) FROM table_...
首先，实现Layui table列宽百分比显示的思路是通过计算表格的总宽度，然后根据每个列的百分比宽计算出每个列的实际像素宽度。Layui table允许我们通过cols配置项自定义列的配置，包括设置列宽，这为实现百分比宽度...
例如，可以通过遍历所有相关`<td>`元素，提取其值，转换为数字，然后累加得到总和。 此外，"效果图.png"很可能是展示完成后的发票收据界面，用户可以通过这个图片预览最终效果，确保设计符合预期。而"2lj改进版...