js动态计算table某列值的总和

最新推荐文章于 2023-02-28 09:35:41 发布

最新推荐文章于 2023-02-28 09:35:41 发布 · 4.6k 阅读

文章标签：

#JavaScript #JSP #ViewUI

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用JavaScript在JSP页面上动态计算带有复选框或不带复选框的表格某列数值的总和，提供了一种提升交互体验的方法。

/**
 * 
 * @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>