添加表格新行时自动更新td元素ID的实现方案咨询

当然可以实现这个需求！首先得指出你原代码里的一个关键问题：所有<td>的ID都是重复的，这不符合HTML规范（ID必须是页面唯一的），会给后续的JS操作或样式选择带来隐患。下面是修改后的代码，完美实现按行号、列号动态生成唯一ID的功能：

核心思路 #

1. 先计算当前表格中非底部行的数量，以此确定新增行的行号（现有行数 + 1）
2. 分三组动态构建单元格：前5个带h-it-行号-列号的单元格、中间文本单元格、后5个带h-gi-行号-列号的单元格
3. 用jQuery的元素创建API替代字符串拼接，代码更易维护且不易出错

修改后的完整代码 #

$(document).ready(function() {
    $('.addRow').click(function(){
        // 获取现有数据行的数量（排除底部的.bottom-row）
        var existingRowCount = $("table tr:not(.bottom-row)").length;
        // 计算新增行的行号
        var newRowNum = existingRowCount + 1;

        // 创建新行元素
        var newRow = $("<tr></tr>");

        // 构建前5个带h-it前缀的单元格
        for(var col = 1; col <= 5; col++){
            var td = $("<td></td>")
                .addClass("harvey")
                .attr("id", `h-it-${newRowNum}-${col}`);
            td.append($("<img>").attr("src", "../Images/HarveyBalls/harvey-null.svg"));
            newRow.append(td);
        }

        // 构建中间的文本单元格
        newRow.append($("<td></td>")
            .addClass("h-text")
            .text(`Enter Initiative ${newRowNum}`));

        // 构建后5个带h-gi前缀的单元格
        for(var col = 1; col <= 5; col++){
            var td = $("<td></td>")
                .addClass("harvey")
                .attr("id", `h-gi-${newRowNum}-${col}`);
            td.append($("<img>").attr("src", "../Images/HarveyBalls/harvey-null.svg"));
            newRow.append(td);
        }

        // 将新行插入到底部行之前
        newRow.insertBefore($(".bottom-row"));

        // 设置样式
        newRow.css("width", "75px");
        newRow.prev().css("text-align", "center");
    });
});

效果说明 #

• 初始有5行数据时，第一次点击新增按钮，生成的第一列ID为h-it-6-1，第二列h-it-6-2，以此类推；后5列的ID为h-gi-6-1到h-gi-6-5
• 后续每次新增行，行号会自动递增（7、8...），所有单元格ID都会保持唯一且符合你需要的命名规则

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