JavaScript拼接表格列仅首行生效，其余行空白问题求助

云原生阿岚

2026-8-14

问题解决指引

问题根源

HTML中id属性是全局唯一标识，你在Razor的foreach循环里重复生成了相同的id（ruta1、desborde1、concatenate），导致getElementById只会获取到页面中第一个匹配的元素，所以只有表格首行完成拼接，其余行无操作。

修改方案

1. 调整HTML（Razor代码）

将重复的id替换为class，因为class允许在多个元素上重复使用：

<table id="Enrut_calx" class="table table-striped">
    <thead class="thead-dark">
        <tr>
            <th class="text-center">Ruta 1</th>
            <th class="text-center">Desborde 1</th>
        </tr>
    </thead>
    @foreach (var item in Model)
    {
        <tr>                    
            <td class="text-center ruta1">
                @Html.DisplayFor(modelItem => item.RUTA_1)
            </td>
            <td class="text-center desborde1">
                @Html.DisplayFor(modelItem => item.DESBORDE_1)
            </td>
            <td class="text-center concatenate">
                @Html.DisplayFor(modelItem => item.DESBORDES)
            </td>
           
        </tr>
    }
</table>

2. 重写JavaScript代码

遍历表格的每一行，针对每行单独获取对应单元格内容并拼接：

// 获取目标表格
const table = document.getElementById('Enrut_calx');
// 获取表格中所有数据行（跳过表头）
const dataRows = table.querySelectorAll('tbody tr');

// 遍历每一行处理
dataRows.forEach(row => {
    // 在当前行内获取对应class的单元格内容
    const ruta = row.querySelector('.ruta1').innerHTML;
    const desborde = row.querySelector('.desborde1').innerHTML;
    // 将拼接结果赋值给当前行的目标单元格
    row.querySelector('.concatenate').innerHTML = ruta + desborde;
});