表格克隆异常：重复添加行及标签序号无法递增求助

问题原因 #

• 点击按钮添加两行：JavaScript函数中使用了for(var l = 0; l < 2; l++)循环，每次触发函数会执行两次克隆添加操作，导致一次点击添加两行
• label数字无法递增：原代码未对克隆后的label内容做更新，且HTML表格结构不规范（<td>直接嵌套在<table>下，缺少<tr>和<tbody>的正确层级）

修改后的HTML代码 #

<div class="row g-0" id="chartNine" style="display:none;">
  <h4 class="card-title">TOWN'S MAIN FED - SPRINKLER ANNUBAR FLOW TEST</h4>
  <table id="dataTable2" style="width: 390px;">
    <thead>
      <tr>
        <th style="background-color: gray">SITE BLOCK PLAN FLOW REQUIREMENTS</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <label for="range1" class="row-number">
           1
          </label>
          <input type="text" value="0" />
          <label> L/MIN @ </label>
          <input type="text" value="0" />
          <label> KPA </label>
        </td>             
      </tr>
    </tbody>
  </table>
  <button onclick="addTable('dataTable2');">+</button>  
</div>

注：修正了表格结构，添加了<tr>和<tbody>，给数字label添加了.row-number类，同时把type="text2"改为标准的type="text"

修改后的JavaScript函数 #

function addTable(tableId){
  var table = document.getElementById(tableId);
  var tbody = table.tBodies[0];
  // 获取当前行数，计算新行的序号
  var newRowNum = tbody.rows.length + 1;
  // 克隆最后一行
  var lastRow = tbody.rows[tbody.rows.length - 1];
  var clonedRow = lastRow.cloneNode(true);
  
  // 更新克隆行的label数字和for属性（避免id关联重复）
  var rowLabel = clonedRow.querySelector('.row-number');
  rowLabel.textContent = newRowNum;
  rowLabel.setAttribute('for', 'range' + newRowNum);
  
  // 添加新行到表格
  tbody.appendChild(clonedRow);
}

说明 #

• 移除了循环，每次点击只克隆并添加一行
• 通过tbody.rows.length获取当前行数，计算新行的序号并更新label内容
• 同步更新label的for属性，避免和原有输入框的id关联重复

内容的提问来源于stack exchange，提问作者RottenPotatoes