JavaScript動態實現 添加 刪除表單

//addattach.js
function resizeup(obj) {
  var newheight = parseInt($(obj).style.height, 10) + 50;
  document.getElementById(obj).style.height = newheight + 'px';
}

//  ---------------------------------------

function resizedown(obj) {
  var newheight = parseInt($(obj).style.height, 10) - 50;
  if(newheight > 0) {
    document.getElementById(obj).style.height = newheight + 'px';
  }
}

//  ---------------------------------------

function addattachfrom() {
  var newnode = document.getElementById('attachbodyhidden').firstChild.cloneNode(true);
  document.getElementById('attachbody').appendChild(newnode);
}

//  ---------------------------------------

function removeattachfrom() {
  document.getElementById('attachbody').childNodes.length > 1 && document.getElementById('attachbody').lastChild ? document.getElementById('attachbody').removeChild(document.getElementById('attachbody').lastChild) : 0;
}

//  ---------------------------------------

function checkall(form) {
  for (var i = 0; i < form.elements.length; i ++ ) {
    var e = form.elements[i];
    if (e.name != 'chkall')
    e.checked = form.chkall.checked;
  }
}

//  ---------------------------------------
 //index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="icon" href="/favicon.ico" type="image/x-icon" /> 
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 
<title>不定數量表單添加的處理方法演示</title> 
<meta name="Description" content="" /> 
<meta content="" name="Keywords" /> 
<link rel="stylesheet" rev="stylesheet" href="../nav/nav.css" type="text/css" media="all" /> 
<script type="text/javascript" src="./addattach.js"></script> 
</head> 
 
  <table width="750" border="0" cellpadding="0" cellspacing="0" id="main-table" align="center"> 
    <tr> 
      <td> 
	   <h1>不定數量表單添加的處理方法演示</h1> 
        <form name="f1" action="#" enctype="multipart/form-data" method="POST"  onSubmit="return Validator.Validate(this,2)"> 
<table width="95%" border="0" cellspacing="2" cellpadding="2"> 
 <tr> 
  <tr> 
    <td width="25%" align="right">請輸入單號(*)</td> 
    <td width="75%" align="left"><input name="SheetID" type="text" id="" size="30" maxlength="200" dataType="Require" msg="單號必須填寫" /></td> 
  </tr> 
  <tr> 
    <td width="25%" align="right">銷售日期(*)</td> 
    <td width="75%" align="left"><input type="text" name="sdate" οnclick="setday(this)" id="" dataType="Date" format="ymd" msg="日期格式不正確" /></td> 
  </tr> 
 
<tr class="tablecell"> 
      <td height="40" colspan="2" align="center" valign="middle" bgcolor="#F0F0F0"> 
		(提示:點擊[+]可以增加表單,點擊[-]可以減少表單)<br /> 
		以下直接按ENTER鍵可跳入下一表單框
	</td> 
</tr> 
<tr class="tablecell"> 
<td style="padding-top:5px;" colspan="2"> 
<table width="90%" align="center" cellpadding="0" cellspacing="0" class="celltable"> 
  <tbody id="attachbodyhidden" style="display:none"><tr><td width="100%"> 
  <table class="gray" border="0" cellspacing="2" cellpadding="2" style="border-left:1px solid #DEDEDE;border-right:1px solid #DEDEDE;border-top:1px solid #DEDEDE;border-bottom:1px solid #DEDEDE;"> 
   <tr> 
	<td width="20%" align="right">藥品名稱</td> 
	<td width="80%" align="left"><input type="text" name="GoodsName[]" id="" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></td> 
   </tr> 
   <tr> 
	<td width="20%" align="right">藥品條形碼</td> 
	<td width="80%" align="left"><input type="text" name="BarCode[]" id="" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></td> 
   </tr> 
   <tr> 
	<td width="20%" align="right">劑型</td> 
	<td width="80%" align="left"><input type="text" name="PKindID[]" id="" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></td> 
   </tr> 
   <tr> 
	<td width="20%" align="right">單位</td> 
	<td width="80%" align="left"><input type="text" name="Unit[]" id="" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></td> 
   </tr> 
   <tr> 
	<td width="20%" align="right">數量</td> 
	<td width="80%" align="left"><input type="text" name="Qty[]" id="" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></td> 
   </tr> 
   <tr> 
	<td width="20%" align="right">有效日期</td> 
	<td width="80%" align="left"><input type="text" name="udate[]" id="" οnclick="setday(this)" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></td> 
   </tr> 
  </table> 
  </td></tr></tbody> 
  <tbody id="attachbody"><tr><td width="100%"> 
 <table class="gray" border="0" cellspacing="2" cellpadding="2" style="border-left:1px solid #DEDEDE;border-right:1px solid #DEDEDE;border-top:1px solid #DEDEDE;border-bottom:1px solid #DEDEDE;"> 
   <tr> 
	<td width="20%" align="right">藥品名稱</td> 
	<td width="80%" align="left"><input type="text" name="GoodsName[]" id="" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></td> 
   </tr> 
   <tr> 
	<td width="20%" align="right">藥品條形碼</td> 
	<td width="80%" align="left"><input type="text" name="BarCode[]" id="" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></td> 
   </tr> 
   <tr> 
	<td width="20%" align="right">劑型</td> 
	<td width="80%" align="left"><input type="text" name="PKindID[]" id="" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></td> 
   </tr> 
   <tr> 
	<td width="20%" align="right">單位</td> 
	<td width="80%" align="left"><input type="text" name="Unit[]" id="" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></td> 
   </tr> 
   <tr> 
	<td width="20%" align="right">數量</td> 
	<td width="80%" align="left"><input type="text" name="Qty[]" id="" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></td> 
   </tr> 
   <tr> 
	<td width="20%" align="right">有效日期</td> 
	<td width="80%" align="left"><input type="text" name="udate[]" id="" οnclick="setday(this)" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></td> 
   </tr> 
  </table> 
  </td></tr></tbody> 
  </table> 
  </td> 
</tr> 
 
<tr><td colspan="2"><a href="#add" οnclick="addattachfrom();">添加[+]</a> <a href="#add" οnclick="removeattachfrom();">減少[-]</a></strong><a name="add"></a></td></tr> 
 
  <tr> 
    <td>&nbsp;</td> 
    <td align="left"><input type="submit" name="Submit" value="添加銷售記錄" /></td> 
  </tr> 
</table> 
</form> 
</td> 
    </tr> 
  </table> 
 
 
 
 
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章