动态添加删除表格行,以及计算列之间的乘积

最新推荐文章于 2022-02-07 17:53:49 发布

randomnet

最新推荐文章于 2022-02-07 17:53:49 发布

阅读量692

点赞数

本文链接：https://blog.csdn.net/randomnet/article/details/36185297

版权

<%@ page language="java" contentType="text/html; charset=GBK"
	pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">

<script language="javascript">
	
	function findObj(theObj, theDoc) {
		var p, i, foundObj;
		
		if (!theDoc)
			theDoc = document;
		
		if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
			theDoc = parent.frames[theObj.substring(p + 1)].document;
			theObj = theObj.substring(0, p);
		}
		
		if (!(foundObj = theDoc[theObj]) && theDoc.all)
			foundObj = theDoc.all[theObj];
		
		for (i = 0; !foundObj && i < theDoc.forms.length; i++)
			foundObj = theDoc.forms[i][theObj];
		
		for (i = 0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
			foundObj = findObj(theObj, theDoc.layers[i].document);
		
		if (!foundObj && document.getElementById)
			foundObj = document.getElementById(theObj);
		
		return foundObj;
	}
	
	function sumTotal(){		
		var total = 0;
		for(var i=0;i<rows.length;i++){
			var n = document.getElementById("txtResult"+rows[i]).value;
			if(n && !isNaN(n)){
				total+=parseFloat(n);
			}
		}
		document.getElementById("total").innerText = total;
	}
		
	function countHj(obj,rowId){
		var price = document.getElementById("txtPrice" + rowId).value;
		var num = document.getElementById("txtNum" + rowId).value;
		
		if(price && num && !isNaN(price) && !isNaN(num)){
			document.getElementById("txtResult"+rowId).value = parseFloat(price)*parseFloat(num);
		}
		sumTotal();
	}
	
	var rowIndex = 1;  //
	var rows = [];
	
	//添加一行
	function AddSignRow() {
		var rowID = rowIndex++;
		rows.push(rowID);
		
		var tableObj = document.getElementById("countTable");
		
		//添加行
		var newTR = tableObj.insertRow(tableObj.rows.length);
		newTR.id = "countTable_tr_" + rowID;
		
		//添加列:单价
		var newPriceTD = newTR.insertCell(0);
		//添加列内容
		newPriceTD.innerHTML = "<input name='txtPrice" + rowID + "' id='txtPrice" + rowID + "' οnchange='countHj(this,\""+rowID+"\");' type='text' size='12' />";
		
		//添加列:数量
		var newNumTD = newTR.insertCell(1);
		//添加列内容
		newNumTD.innerHTML = "<input name='txtNum" + rowID + "' id='txtNum" + rowID + "' οnchange='countHj(this,\""+rowID+"\");' type='text' size='12' />";		
		
		//添加列:结果
		var newResultTD = newTR.insertCell(2);
		//添加列内容
		newResultTD.innerHTML = "<input  name='txtResult" + rowID + "' id='txtResult" + rowID + "' type='text' size='12'/>";
		
		//添加列:删除按钮
		var newDeleteTD = newTR.insertCell(3);
		//添加列内容
		newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' οnclick=\"DeleteSignRow('"
				+ rowID + "')\">删除</a></div>";
		
		//将行号推进下一行
		txtTRLastIndex.value = (rowID + 1).toString();
	}
	
	//删除指定行
	function DeleteSignRow(rowid) {
		var tableObj = document.getElementById("countTable");
		
		var trObj = document.getElementById("countTable_tr_"+rowid);
				
		//删除指定Index的行
		tableObj.deleteRow(trObj.rowIndex);	
		
		for(var i=0;i<rows.length;i++){
			if(rows[i]==rowid){
				rows.splice(i,1);
			}
		}
		sumTotal();
	}
	
	//清空列表
	function ClearAllSign() {
		if (confirm('确定要清空所有行吗？')) {
			var tableObj = findObj("countTable", document);
			var rowscount = tableObj.rows.length;
			
			//循环删除行,从最后一行往前删除
			for (i = rowscount - 1; i > 0; i--) {
				tableObj.deleteRow(i);
			}
			
			//重置最后行号为1
			var txtTRLastIndex = findObj("txtTRLastIndex", document);
			txtTRLastIndex.value = "1";		
		}
	}
</script>

<title>Insert title here</title>
</head>
<body>
	<div>
		<table width="340" border="0" cellpadding="0" cellspacing="1" id="countTable">
			<tr>
				<td width="100" bgcolor="#96E0E2">单价</td>
				<td width="100" bgcolor="#96E0E2">数量</td>
				<td width="100" bgcolor="#96E0E2">结果</td>
				<td width="40"></td>
			</tr>
		</table>
	</div>
	<div>
		<table width="340" border="0" cellpadding="0" cellspacing="1">
			<tr>
				<td width="100" ></td>
				<td width="100">合计</td>
				<td width="100"><font id="total"></font></td>
				<td width="40" ></td>
			</tr>
		</table>
	</div>
	<div>
		<input type="button" name="Submit" value="添加" οnclick="AddSignRow()" /> 
		<input type="button" name="Submit2"	value="清空" οnclick="ClearAllSign()" /> 
		<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
	</div>

</body>
</html>