JavaScript动态添加删除表格行

昨天同学问到JSP中动态添加一组输入框怎么实现，我想JSP或ASP以及CGI等可用于WEB编程的都不外乎两种方法实现，一种是在服务器端添加脚本来实现（点击按钮就提交一次，然后在原来基础上添加一组），二是在浏览器端用JavaScript或DHTML来控制动态生成。相比而言能用JS实现可能会简单些。我想用一个动态添加删除表格行的JS例子稍微修改一下就可以实现所要的结果，修改后的代码如下：

<table id="idTB" border=0><!--注意id，与JS中的要相对应-->
  <tr id=idTR>
    <td>第一行 <input type='button'></td>
  </tr>
</table>
<input type="button" onclick="addRow()" value="添加一行"><br>
<input type="button" onclick="delRow()" value="删除一行"> Row index:<input id="idIndex">(<a id="idFirst">1</a>~<a id="idLast">1</a>)
<script>
function addRow(){//添加表格的一行
  oTR=idTB.insertRow(idTB.rows.length);
  tmpNum=oTR.rowIndex;
  oTD=oTR.insertCell(0);
  oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
  oTD.innerHTML="<input type='text' name='txt"+tmpNum+"'>";//要在该格添加的HTML代码填在这里，因为这里是text，注意不要重名了。
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length>0)
    idFirst.innerText='1';
  return true;
}
function delRow(){//删除表格的一行
  sIndex=idIndex.value;
  if(sIndex=='')
    sIndex=idTB.rows.length-1;
  else
    sIndex=parseInt(sIndex)-1;
   
 idTB.deleteRow(sIndex);
 
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length==0)
    idFirst.innerText='0';
}
</script>