JavaScript 如何通过tr标签id动态更新HTML表格指定行数据

可行实现方案如下： #

方案1：直接通过id选择器定位（性能最优、写法最简单）

HTML中id属性全局唯一，若你的tr标签的id值和接口返回的data.id完全一致，直接通过全局id查询即可：

.then(data => {
    const targetTr = document.getElementById(data.id);
    // 判空避免找不到元素时报错
    if (targetTr) {
        targetTr.cells[6].innerHTML = data.hours;
    }
})

如果为了避免和页面其他元素id冲突，你给tr的id加了前缀（例如tr-1001），拼接前缀即可：
const targetTr = document.getElementById(tr-${data.id});

方案2：表格范围内限定查询

如果不想依赖全局id查询，可以限定在你的表格范围内查找对应tr：

.then(data => {
    const myTable = document.getElementById('TimeEntryTable');
    const targetTr = myTable.querySelector(`tr[id="${data.id}"]`);
    if (targetTr) {
        targetTr.cells[6].innerHTML = data.hours;
    }
})

方案3：遍历行匹配（兼容性最强）

如果你后续把行id存在tr的自定义属性（例如data-row-id，更符合HTML规范，避免全局id污染），可以遍历所有表格行匹配：

.then(data => {
    const myTable = document.getElementById('TimeEntryTable');
    for (let i = 0; i < myTable.rows.length; i++) {
        const currentTr = myTable.rows[i];
        // 若用自定义属性存id，判断条件改为 currentTr.dataset.rowId == data.id
        if (currentTr.id == data.id) {
            currentTr.cells[6].innerHTML = data.hours;
            break;
        }
    }
})

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