动态渲染表格时点击单元格跳转对应ID异常问题求助

问题现象 #

在Django项目中，通过原生JS动态生成表格行，每行对应一个带唯一ID的release记录。预期点击行内任意单元格时跳转到对应release的详情页，但实际所有单元格点击后都会跳转到最后一条数据的详情页面。

问题原因 #

这是典型的闭包作用域陷阱：循环中用var声明的id属于函数级作用域，所有单元格的点击事件回调共享同一个id引用。循环结束后，id的值会被更新为最后一条数据的ID，因此所有点击事件触发时都会调用这个最终值。

解决方案 #

方案1：用let声明变量（最简方案） #

将循环中id的声明从var改为let，利用let的块级作用域特性，每次循环都会创建独立的id变量，确保每个事件回调绑定的是当前循环的ID值：

function updateTable(filtered_releases) {
    var table_body = document.getElementById("release-table-body");

    console.log("STARTING TO ADD RELEASES TO NEW TABLE BODY");
    for (const release in filtered_releases) {
        var new_release = filtered_releases[release];
        // 用let替代var，创建块级作用域的独立id变量
        let id = new_release['id'];
        var release_type = new_release['release_type'];
        var business_unit = new_release['business_unit'];
        var product_line = new_release['product_line'];
        var product_id = new_release['product_id'];
        var deployment_project = release_type == "github" ? new_release['repo_name'] : new_release['deployment_project'];
        var deployment_environment = new_release['deployment_environment'];
        var deployment_version = new_release['version'];

        var new_row = document.createElement("tr");
        new_row.id = "release_" + id;

        // checkbox列（跳过跳转逻辑）
        var td_checkbox = document.createElement("td");
        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        td_checkbox.appendChild(checkbox);
        new_row.appendChild(td_checkbox);

        // ID列
        var td_id = document.createElement("td");
        td_id.innerHTML = id;
        td_id.addEventListener("click", function () { navigateToDeploymentView(id) });
        new_row.appendChild(td_id);

        // 其余单元格的创建与事件绑定代码保持不变...

        table_body.appendChild(new_row);
    }
    console.log("FINISHED ADDING RELEASES TO NEW TABLE BODY");
}

方案2：自定义属性+事件获取当前ID #

给每个可点击单元格添加data-id属性，点击时从当前元素提取ID，彻底规避作用域问题：

function updateTable(filtered_releases) {
    var table_body = document.getElementById("release-table-body");

    console.log("STARTING TO ADD RELEASES TO NEW TABLE BODY");
    for (const release in filtered_releases) {
        var new_release = filtered_releases[release];
        var id = new_release['id'];
        // ...其他变量声明

        var new_row = document.createElement("tr");
        new_row.id = "release_" + id;

        // checkbox列
        var td_checkbox = document.createElement("td");
        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        td_checkbox.appendChild(checkbox);
        new_row.appendChild(td_checkbox);

        // ID列：添加data-id自定义属性
        var td_id = document.createElement("td");
        td_id.innerHTML = id;
        td_id.dataset.id = id;
        td_id.addEventListener("click", function () { 
            // 从当前元素获取绑定的ID
            navigateToDeploymentView(this.dataset.id); 
        });
        new_row.appendChild(td_id);

        // 其余单元格同理，添加data-id并修改事件回调...

        table_body.appendChild(new_row);
    }
    console.log("FINISHED ADDING RELEASES TO NEW TABLE BODY");
}

方案3：事件委托（性能最优） #

不给每个单元格单独绑定事件，而是给表格主体绑定一次事件，通过事件冒泡判断点击元素，从父行提取ID。适合数据量较大的场景，减少内存占用：

// 页面加载时绑定事件委托，仅需执行一次
document.getElementById("release-table-body").addEventListener("click", function(e) {
    // 定位点击的td元素
    const targetTd = e.target.closest("td");
    // 排除checkbox所在列
    if (targetTd && !targetTd.querySelector("input[type='checkbox']")) {
        // 从父行提取ID
        const row = targetTd.closest("tr");
        const releaseId = row.id.replace("release_", "");
        navigateToDeploymentView(releaseId);
    }
});

function updateTable(filtered_releases) {
    var table_body = document.getElementById("release-table-body");

    console.log("STARTING TO ADD RELEASES TO NEW TABLE BODY");
    for (const release in filtered_releases) {
        var new_release = filtered_releases[release];
        var id = new_release['id'];
        // ...其他变量声明

        var new_row = document.createElement("tr");
        new_row.id = "release_" + id;

        // 创建所有单元格，无需绑定点击事件
        var td_checkbox = document.createElement("td");
        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        td_checkbox.appendChild(checkbox);
        new_row.appendChild(td_checkbox);

        var td_id = document.createElement("td");
        td_id.innerHTML = id;
        new_row.appendChild(td_id);

        // 其余单元格创建代码保持不变...

        table_body.appendChild(new_row);
    }
    console.log("FINISHED ADDING RELEASES TO NEW TABLE BODY");
}

跳转函数保持不变 #

function navigateToDeploymentView(id) {
    window.location = '{{ base_url }}/deployment/?id=' + id;
}

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