JavaScript：如何为克隆生成的输入元素设置递增编号ID？

我用JavaScript的clone函数克隆表格行来添加新行，想要新行里的隐藏输入框带有序号的ID——比如第一个新增行的input ID是HiddenBox1，第二个是HiddenBox2，依此类推。但现在点击「Add」按钮后，只能把第一个id="boxHidden"的输入框ID改成0，后续新增的输入框没法依次设置成1、2这样的递增编号，求解决办法！

现有代码 #

JavaScript 代码 #

<script>
function addRow() {
    const table = document.querySelector('#tbl_usr_task'); // 表格ID
    const tfoot = table.querySelector('tfoot'); // 表格页脚
    const emptyRow = tfoot.querySelector('tr:nth-child(2)'); // 要克隆的行
    const clone = emptyRow.cloneNode(true);
    clone.querySelector('th').innerHTML = '';
    tfoot.appendChild(clone); // 添加克隆行
    [].forEach.call(document.querySelectorAll('tr:nth-child(2)'), function() {
        var div_array = [...document.querySelector('td:nth-child(8)').querySelectorAll('#boxHidden')]; // 转换NodeList为数组
        div_array.forEach((v,i)=>v.id=i+0);
    });
}
</script>
<button type="button" class="btn btn-light add-more" onclick="addRow();">Add</button>

表格行模板 #

<tr>
  <th style="display: none;">              
     &nbsp;      
  </th> 

  <td>  
    <input id="boxHidden" type='hidden' name='ovr_ms[]' value='0' />   
    <input id="boxVisible" type="checkbox" name="ovr_ms[]" value='1' onclick="disableHiddenBox()"/> 
  </td> 
</tr>

解决方案 #

问题分析 #

原代码的核心问题：

1. 用#boxHidden选择器只能匹配页面中第一个该ID的元素（页面内ID必须唯一），后续克隆行的隐藏框因ID重复无法被选中
2. 遍历tr:nth-child(2)的逻辑错误，每次只能操作固定位置的行，无法处理新增的行

修复后的代码 #

<script>
function addRow() {
    const table = document.querySelector('#tbl_usr_task');
    const tfoot = table.querySelector('tfoot');
    const emptyRow = tfoot.querySelector('tr:nth-child(2)');
    const clone = emptyRow.cloneNode(true);
    
    // 清空克隆行的th内容
    clone.querySelector('th').innerHTML = '';
    
    // 统计已新增的带序号隐藏框数量，生成新序号
    const addedCount = document.querySelectorAll('input[id^="HiddenBox"]').length;
    // 获取克隆行内的隐藏输入框
    const hiddenInput = clone.querySelector('#boxHidden');
    // 设置递增ID：第一个新增行是HiddenBox1，第二个是HiddenBox2...
    hiddenInput.id = `HiddenBox${addedCount + 1}`;
    
    // 可选：给可见复选框也设置唯一ID，避免页面ID重复
    const visibleInput = clone.querySelector('#boxVisible');
    visibleInput.id = `VisibleBox${addedCount + 1}`;
    
    // 将克隆行添加到表格
    tfoot.appendChild(clone);
}
</script>
<button type="button" class="btn btn-light add-more" onclick="addRow();">Add</button>

代码说明 #

• document.querySelectorAll('input[id^="HiddenBox"]')：通过属性选择器统计所有已新增的带序号隐藏框，确保序号连续递增
• 直接操作克隆行内的元素，无需遍历所有行，逻辑更清晰且性能更优
• 给可见复选框设置唯一ID（可选），严格遵循页面ID唯一规则，避免潜在的DOM操作问题

如果需要把原始的boxHidden也纳入序号体系，可以将它的ID改为HiddenBox0，这样统计时会包含它，序号从0开始递增，按需调整即可。

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