动态增删表

前台页面page1.html:

 <FORM action="Page2.asp" method=POST id="form1">
 <table id="myTable">
  <tr >
   <td id="myTd1">
    <INPUT type="text" name="text1">内容
   </td>
  </tr>
 </table>
 <br/>
 <button  οnclick="doAdd();" >AddRow</button>
 <button  οnclick="doDel();" >DelRow</button>
 <button  οnclick="form1.submit();">OK!</button>
</FORM>
 
<script>
var i=0;
function doAdd()
{
 i=i+1;
 var nowTable=document.all.myTable;
 var newTr=nowTable.insertRow(i);
 var newTd=newTr.insertCell(0);
 newTd.innerHTML =myTd1.innerHTML;
 
 //假设名字是随便取的
 newTd.getElementsByTagName("INPUT")[0].setAttribute("name","text" + parseInt( Math.random() * 100));
 
 //可以用下面这行测试新名字
 alert( newTd.getElementsByTagName("INPUT")[0].getAttribute("name"));
 //getAttribute("name"));
 
}
function doDel()
 {
 if(i>=1)
 {
  document.all.myTable.rows(i).removeNode();
  i=i-1;
 }
 else
 {
  alert("不能全删光!");
 }
}
</script>
 
后台页面page2.asp:

<%
 
 for each myInput in Request.Form
  Response.Write myInput 
  Response.Write "=" 
  Response.Write  Request(myInput)
  Response.Write  "<br/>"
 next
%>

 

 

 

<table id="idTB" border=1>
  <tr id="idTR">
    <td>First row</td>
  </tr>
</table>
<input type="button" οnclick="addRow();" value="加一行">
<br/>
<input type="button" οnclick="RemoveRow();" value="减一行">
<script language="javascript">
function addRow()
{
  oTR=idTB.insertRow(idTB.rows.length);
  oTD=oTR.insertCell(0);
  oTD.innerText="New Row " + oTR.rowIndex;
}
function RemoveRow()
{
  oTR=idTB.rows(idTB.rows.length-1);
  oTR.removeNode(true);
}
</script>