<%@ 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>
动态添加删除表格行,以及计算列之间的乘积
最新推荐文章于 2024-03-22 09:44:13 发布