动态增加表单域

最近有个地方需要用到动态增加表单对象,原本不是采用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>&nbsp;</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();">&nbsp;    
      <input type="button"  value="删除" class="bottom" οnclick="delDetailProcess();">&nbsp;    
      <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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值