请教一下很简单的动态更新表格行的问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<TABLE id="tbDetailUsed">
<tr>
      <td><input type="text" name="a" size=2 ></td>
      <td><input type="text" name="b" size=2 ></td>
      <td><input value="add"  id="add" onclick="addDetailProcess()" type=button></td>
      <td><input value="del"  id="del" onclick="delDetailProcess()" type=button></td>
    </tr>
    <tr>
      <td><input type="text" name="a" size=2 ></td>
      <td><input type="text" name="b" size=2 ></td>
      <td><input value="add"  id="add" onclick="addDetailProcess()" type=button></td>
      <td><input value="del"  id="del" onclick="delDetailProcess()" type=button></td>
    </tr></TABLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function addDetailProcess()
{
var crrentrow = event.srcElement.parentNode.parentNode.rowIndex;
var crrentrowHTML = document.all("tbDetailUsed").rows[crrentrow].innerHTML;
var newtr = document.all("tbDetailUsed").insertRow(crrentrow+1);
var newCellA = newtr.insertCell(0);
var newCellB = newtr.insertCell(1);
var newCellC = newtr.insertCell(2);
var newCellD = newtr.insertCell(3);
newCellA.innerHTML =  document.all("tbDetailUsed").rows[crrentrow].cells[0].innerHTML;
newCellB.innerHTML = document.all("tbDetailUsed").rows[crrentrow].cells[1].innerHTML;
newCellC.innerHTML = document.all("tbDetailUsed").rows[crrentrow].cells[2].innerHTML;
newCellD.innerHTML = document.all("tbDetailUsed").rows[crrentrow].cells[3].innerHTML;
//newtr.innerHTML = crrentrowHTML;
}
function delDetailProcess()
{
    var delRow=document.all("tbDetailUsed").deleteRow(event.srcElement.rowIndex);
}
//-->
</SCRIPT>
</BODY>
</HTML>

解决方案 »

  1.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title><style>
    TD,INPUT{ font-size:12; }
    </style>
    </head><body bgcolor=EEEEEE>
    <table align="center" bordercolor=cccccc border=1 width=100% >
      <tr bgcolor=eeeeee id="trDetailTitles"> 
        <td  colspan=100 >表头</td>
      </tr>
      <tbody id="tbDetailUsed">
        <tr>
          <td><input type="text" name="a" size=2 ></td>
          <td><input type="text" name="b" size=2 ></td>
          <td><input type=button value=add onclick="addDetailProcess(this.parentElement.parentElement);"> 
          <input type=button value=del onclick="delDetailProcess(this.parentElement.parentElement);"></td>
        </tr>    <tr>
          <td><input type="text" name="a" size=2 ></td>
          <td><input type="text" name="b" size=2 ></td>
          <td><input type=button value=add onclick="addDetailProcess(this.parentElement.parentElement);">
          <input type=button value=del onclick="delDetailProcess(this.parentElement.parentElement);"></td>
        </tr>
        
        <tr>
          <td colspan=2 >&nbsp;</td>
          <td><input type=button value=add onclick="addDetailProcess(this.parentElement.parentElement);"></td>
        </tr>
      </tbody>
    </table></form><table id="tbDetailHide" style="display:none">
        <tr>
          <td><input type="text" name="a" size=2 ></td>
          <td><input type="text" name="b" size=2 ></td>
          <td><input type=button value=add onclick="addDetailProcess(this.parentElement.parentElement);">
          <input type=button value=del onclick="delDetailProcess(this.parentElement.parentElement);"></td>
        </tr>
    </table>
    </body></html><script language=javascript>function addDetailProcess(desRow)
    {
    var newRow = tbDetailHide.rows[0].cloneNode(true);
    if(desRow.all.a)
    {
      newRow.all.a.value=desRow.all.a.value;
      newRow.all.b.value=desRow.all.b.value;
    }
    tbDetailUsed.insertBefore(newRow,desRow);
    }
    function delDetailProcess(delRow)
    {
        tbDetailUsed.deleteRow(delRow);
    }</script>
      

  2.   

    把 add 改成 insert 可能要合适一点
      

  3.   

    楼上的有个小bug,del时，del的上一行.方法值得学习。
      

  4.   

    果然，改成如下：function delDetailProcess(delRow)
    {
        delRow.removeNode(true);
    }
      

  5.   

    多谢多谢tbDetailUsed.insertBefore(newRow,desRow); 这句总是在前面插入一行改成tbDetailUsed.insertBefore(newRow); 效果是在后面插入一行，这么改应该可以吧
     springwood 的del总是删除第一行：）