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

来源：互联网发布：淘宝人群画像工具编辑：程序博客网时间：2024/06/15 15:53
<%@ 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 + "' onchange='countHj(this,\""+rowID+"\");' type='text' size='12' />";//添加列:数量var newNumTD = newTR.insertCell(1);//添加列内容newNumTD.innerHTML = "<input name='txtNum" + rowID + "' id='txtNum" + rowID + "' onchange='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:;' onclick=\"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);}//重置最后行号为1var 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="添加" onclick="AddSignRow()" /> <input type="button" name="Submit2"value="清空" onclick="ClearAllSign()" /> <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" /></div></body></html>
0 0