最近有个地方需要用到动态增加表单对象,原本不是采用js的方法比较不理想,以下是js的方法。
在编写过程中不小心把添加行按纽的属性写成了submit,浪费了许多时间,才发现。
<%@ page contentType="text/html; charset=gb2312" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="../css/table.css">
<title></title>
<style>
TD,INPUT{ font-size:12; }
</style>
</head>
<body bgcolor=EEEEEE>
<form name="frm" action="getresult.jsp" method=post >
<h4 align=center> </h4>
<table align="center" bordercolor=cccccc border=1 width=100% >
<tr>
<td width=500>
</td>
<td align=right>
<input type="button" value="增加" class="bottom" οnclick="addDetailProcess();">
<input type="button" value="删除" class="bottom" οnclick="delDetailProcess();">
<input type="button" value="完成" class="bottom" οnclick="submitProcess();">
</td>
</tr>
</table>
<div width=100% id=thedetailtableDIV>
<table align="center" bordercolor=cccccc border=1 width=100% >
<tr bgcolor=eeeeee id="trDetailTitles">
<td width="25%"><strong>承运人/航班号(例如:CX888)</strong></td>
<td width="10%"><strong>起飞城市</strong></td>
</tr>
<tbody id="tbDetailUsed" >
<tr>
<td><input name="FNo" type="text" id="FNo" size="15"></td>
<td><input name="sCity" type="text" id="sCity" size="10"></td>
</tr>
</tbody>
</table>
</div>
</form>
<!--复制的内容-->
<table id="tbDetailPrepare" style="display:none">
<tr>
<td><input name="FNo" type="text" id="FNo" size="15"></td>
<td><input name="sCity" type="text" id="sCity" size="10"></td>
</tr>
</table>
<input name="theHistoryRecord" type=hidden value="">
</body>
</html>
<script language=javascript>
window.onload = historyOncemore;
window.onbeforeunload = fixHistory;
function fixHistory() //记住历史
{
document.all("theHistoryRecord").value=document.all("thedetailtableDIV").innerHTML.replace(//n/g,"");
}
function historyOncemore() //恢复历史
{
if (document.all("theHistoryRecord").value!="")
{document.all("thedetailtableDIV").innerHTML=document.all("theHistoryRecord").value;
}
}
function selectallcheckbox(obj) //全选或全不选
{
var tureorfalse=obj.checked;
var theDetail=tbDetailUsed.rows;
for(var i=0;i<theDetail.length-1;i++)
{
theDetail[i].all("record_select").checked=tureorfalse;
}
}
function addDetailProcess(afterRowIndex) //增加明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
var theFirstSelectedDetail;
if (afterRowIndex==null)
{
theFirstSelectedDetail=alltbDetailUsed.length-2;
}
else theFirstSelectedDetail=afterRowIndex;
var newRow = document.all("tbDetailPrepare").rows[0].cloneNode(true);
var desRow = alltbDetailUsed[theFirstSelectedDetail+1];
desRow.parentElement.insertBefore(newRow,desRow );
}
function delDetailProcess() //删除明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
if (confirm("确定选择正确并且要将这些明细删除")==false) return false;
for(var i=0;i<alltbDetailUsed.length-1;i++)
{
if (alltbDetailUsed[i].all("record_select").checked==true)
{
document.all("tbDetailUsed").deleteRow(i);
i=i-1;
}
}
}
function submitProcess()
{
document.frm.submit();
}
</script>