如何用JavaScript克隆最后一个HTML元素并实现ID自动递增？

你的问题很明确：当前代码每次都克隆初始的repeat元素，而不是最新添加的那一行，导致无法实现“克隆最后一个元素并递增ID”的需求。我来帮你修改代码，解决这个问题：

问题根源 #

你当前用document.getElementById('repeat')固定获取第一个tr元素，所以不管点击多少次，都是复制最开始的那一行，而不是最新添加的行。核心解决思路是每次克隆前获取tbody中的最后一个tr元素，再基于它进行克隆和ID递增。

修改后的完整代码 #

HTML部分（初始只保留第一行，后续由JS生成）

<table>
  <tbody id="fieldsContent">
    <tr id="repeat">
      <td><input type="text" id="fieldName"></td>
      <td>
        <select name="fieldType" id="fieldType">
          <option value="Date">Date</option>
          <option value="String">String</option>
          <option value="Integer">Integer</option>
          <option value="IA5String">IA5String</option>
        </select>
      </td>
      <td><input type="checkbox" id="mandatory" name="mandatory"></td>
    </tr>
  </tbody>
</table>
<button id="start" name="start">
  <span>Add</span>
</button>

JavaScript部分

function myFunction() {
  // 获取存放行的tbody容器
  const tbody = document.getElementById('fieldsContent');
  // 获取tbody里的最后一行tr
  const lastRow = tbody.querySelector('tr:last-child');
  
  // 如果没有行就直接返回（防止异常）
  if (!lastRow) return;

  // 计算新的ID后缀：当前已有行数就是新的索引（比如已有1行，新行就是索引1）
  const newIndex = tbody.children.length;

  // 克隆最后一行，true表示深克隆（包含所有子元素）
  const clonedRow = lastRow.cloneNode(true);

  // 更新克隆行的ID
  clonedRow.id = `repeat${newIndex}`;

  // 更新行内的fieldName输入框ID
  const fieldNameInput = clonedRow.querySelector('[id^="fieldName"]');
  fieldNameInput.id = `fieldName${newIndex}`;

  // 更新fieldType下拉框的ID和name
  const fieldTypeSelect = clonedRow.querySelector('[id^="fieldType"]');
  fieldTypeSelect.id = `fieldType${newIndex}`;
  fieldTypeSelect.name = `fieldType${newIndex}`;

  // 更新mandatory复选框的ID和name
  const mandatoryCheckbox = clonedRow.querySelector('[id^="mandatory"]');
  mandatoryCheckbox.id = `mandatory${newIndex}`;
  mandatoryCheckbox.name = `mandatory${newIndex}`;

  // 将克隆好的行添加到tbody末尾
  tbody.appendChild(clonedRow);
}

// 用事件监听代替HTML中的onclick，更符合现代JS规范
document.getElementById('start').addEventListener('click', myFunction);

关键修改说明 #

1. 动态获取最后一行：用tbody.querySelector('tr:last-child')代替固定的getElementById('repeat')，确保每次克隆的都是最新添加的行。
2. 基于元素数量生成ID后缀：通过tbody.children.length获取当前已有行数，直接用这个数字作为新ID的后缀，不需要额外的全局计数器，避免计数器和实际元素数量不一致的问题（比如手动删除行后计数器就失效了）。
3. 前缀选择器匹配元素：使用[id^="fieldName"]这种属性前缀选择器，不管原元素的ID有没有后缀，都能准确匹配到目标元素，比固定查找id="fieldName"更灵活。
4. 规范事件绑定：用addEventListener代替HTML中的onclick属性，让JS代码和HTML结构分离，更易于维护。

额外优化建议 #

• 如果需要支持删除行的功能，只需要在删除行后，后续克隆时依然用tr:last-child获取最后一行，ID生成逻辑依然有效，因为它是基于当前实际的元素数量。
• 可以给克隆的行添加删除按钮，提升交互性，比如在每行最后加一个删除按钮，点击时移除当前行。

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