javascript 自动增加，删除多张表格_script页面存在多个表格处理-优快云博客

本文介绍了一个JavaScript实现的表单操作案例，其中包括如何通过脚本在HTML表格中添加和删除行。该方法适用于动态调整表格内容的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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的关键代码如下：

<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="增加" onclick="addRow(this)"/>
            <input type="button" value="修改" />
            <input type="button" value="删除" onclick="delRow(this)"/>
           </td>
          </tr>
         </table>
        </td>
       </tr>