使用jQuery克隆表格行后，部分输入框id无法修改的问题

架构老林

2026-8-21

问题原因及解决方案

问题根源

HTML id唯一性冲突：你给<td>设置了id="findTaskName"和id="findactivitiesName"，但HTML规范中id必须全局唯一。克隆行后页面会出现多个相同id的<td>，此时document.querySelector只会匹配第一个出现的#findactivitiesName元素（原第一行的td），导致你修改的是原行而非新行的输入框id。
选择器范围错误：全局查找元素时没有限定在新行范围内，加上混合使用jQuery和原生JS，进一步增加了定位错误的概率。

修复后的代码

$(function () {
    $('.add-line-button').click(function () {
        var rowNum = $("#table tbody tr").length;
        const rowId = 'tablerow[' + rowNum + ']';
        var collectionNamePrefix = 'tablerow[' + rowNum + ']';
        // 修复原选择器的引号闭合问题
        var newRow = $("#table tbody tr[id='tablerow[0]']").clone().attr('id', rowId).attr('name', collectionNamePrefix);

        // 直接在新行内部查找元素，避免全局冲突
        newRow.find('.findTaskName input')
              .attr('id', 'hdnTaskName[' + rowNum + ']')
              .val('');
        newRow.find('.findactivitiesName input')
              .attr('id', 'hdnActivityName[' + rowNum + ']')
              .val('');

        $("#table tbody").append(newRow);
    });
});