javascript 自动增加，删除 多张 表格

以下是我用了一天时间才弄好，调死人了。。。。

 

javascript的关键代码如下：

//在按钮所在的table下面增加一个一摸一样的table

function addRow(btIndex){
 var firstRow = getRowByButton(btIndex);
 
 var newRow = firstTable.insertRow(firstRow.rowIndex+1);  
 var nodes = firstRow.childNodes;
 
 var newCell = newRow.insertCell();
 newCell.colSpan=5;
 newCell.innerHTML = nodes[0].innerHTML;
}

//删除按钮所在的那张table

function delRow(index){
 
  nodetr = getRowByButton(index);
  nodeta = nodetr.parentNode;
  nodeta.deleteRow(nodetr.rowIndex);
}

//下面方法是根据按钮来获取按钮所在的表格（tabel）的所在行。

function getRowByButton(btIndex){
  var nodetd = btIndex.parentNode;
  var nodetr = nodetd.parentNode;
  while (nodetr.parentNode.nodeName!="TR"){
   nodetr = nodetr.parentNode;
  }
  nodetr = nodetr.parentNode;
  return nodetr;
}

 

 

html的关键代码如下：

<table class="tableclass"  cellspacing="1" id="firstTable">

 

 

 

<tr id="firstRow">
        <td colspan="5">
         <table class="tableclass"  cellspacing="1">
          <tr>
           <td class="tdclass" width="20%">类别</td>
           <td class="tdclass" width="20%">名称</td>
           <td class="tdclass" width="20%">标识码</td>
           <td class="tdclass" width="20%">品牌</td>
           <td class="tdclass" width="20%">规格</td>
          </tr>
          <tr>
           <td class="td1class"><html:select property="productType">
            <script language="javascript">fillSelect("productType",pawntype)</script>
           </html:select>
           </td>
           <td class="td1class"><html:text property="productArray"/></td>
           <td class="td1class"><html:text property="productArray"/></td>
           <td class="td1class"><html:text property="productArray"/></td>
           <td class="td1class"><html:text property="productArray"/></td>
           
          </tr>
          <tr>
           <td class="tdclass">形状</td>
           <td class="tdclass">数量</td>
           <td class="tdclass">重量</td>
           <td class="tdclass">估价</td>
           <td class="tdclass">典当金额</td> 
          </tr>
          <tr>
           <td class="td1class"><html:text property="productArray"/></td>
           <td class="td1class"><html:text property="productArray"/></td>
           <td class="td1class"><html:text property="productArray"/></td>
           <td class="td1class"><html:text property="productArray"/></td>
           <td class="td1class"><html:text property="productArray"/></td>
          </tr>
          <tr>
           <td class="tdclass" colspan="5">
            <input type="button" value="增加" οnclick="addRow(this)"/>
            <input type="button" value="修改" />
            <input type="button" value="删除" οnclick="delRow(this)"/>
           </td>
          </tr>
         </table>
        </td>
       </tr>

 

大功告成了。