如何使用jQuery为表格<tr>循环分配行号作为id？

问题根源 #

你当前的代码在循环里每次都执行$('table tbody tr td :input')，这会选中表格里所有的输入框元素。循环结束后，所有输入框的属性都会被最后一次循环的i值覆盖，所以最终所有元素的id都是同一个值。

修正方案 #

方案1：使用jQuery的.each()方法（更简洁） #

直接遍历每一行，同时获取行的索引，然后处理该行内的输入框：

function generateId() {
    $('table tbody tr').each(function(index) {
        // 索引从0开始，行号用index+1对应第1行id为1的需求
        const rowNumber = index + 1;
        // 仅处理当前行内的输入框
        $(this).find('td :input')
            .attr('id', rowNumber)
            .attr('name', rowNumber)
            .addClass('form-control form-control-sm form-control-solid')
            .addClass(`formInput-${rowNumber}`);
        // 若要给<tr>本身设置id，可添加下面这行
        // $(this).attr('id', `row-${rowNumber}`);
    });
}

• .each()遍历每一行时，this指向当前的<tr>元素，确保操作范围只在当前行
• 用index+1转换为从1开始的行号，符合你要的第1行对应id=1的规则

方案2：修正原for循环逻辑 #

如果坚持用for循环，需要每次只选中当前索引对应的行，再定位行内的输入框：

function generateId() {
    const rows = $('table tbody tr');
    for (let i = 0; i < rows.length; i++) {
        const rowNumber = i + 1;
        // 选中第i行（eq()索引从0开始），再查找行内输入框
        rows.eq(i).find('td :input')
            .attr('id', rowNumber)
            .attr('name', rowNumber)
            .prop('class', `form-control form-control-sm form-control-solid formInput-${rowNumber}`);
    }
}

• 先把所有行存入变量rows，避免循环中重复查询DOM，提升性能
• 用let声明循环变量i，避免全局变量污染

额外注意事项 #

• 页面内id必须唯一，如果同一行有多个输入框，直接用行号作为id会导致冲突，建议给id加前缀（比如input-${rowNumber}-1、input-${rowNumber}-2）
• 如果需要统计行数，直接用$('table tbody tr').length即可，无需额外存储变量（除非后续要复用这个数值）

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