在 Javascript 中连接

Question

我使用 javascript 连接表中的两列：

var ruta = document.getElementById('ruta1').innerHTML;
    var desborde = document.getElementById('desborde1').innerHTML;
    document.getElementById('concatenate').innerHTML += '' + ruta + '' + desborde;

<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" id="ruta1">
                            @Html.DisplayFor(modelItem => item.RUTA_1)
                        </td>
                        <td class="text-center" id="desborde1">
                            @Html.DisplayFor(modelItem => item.DESBORDE_1)
                        </td>
                        <td class="text-center" id="concatenate">
                            @Html.DisplayFor(modelItem => item.DESBORDES)
                        </td>
                       
                    </tr>
                }
            </table>

我的结果是：

但是，尽管它在图像中显示的结果是我需要的，但在其他行中它没有向我显示相同的结果并且它使行变为空白。

如果有人可以指导我，我将不胜感激。

Answer 1

我不确定这是否是问题所在，但您在 foreach 循环内的行中有“硬编码”ID。

因此，该循环将生成许多具有相同 ID（ruta1、desborde1 和 concatenate）的 DOM 对象，当您尝试执行“document.getElementById('ruta1')”时，您不再找到一个元素，您会发现许多具有相同 ID 的元素（这不应该发生）。

所以我的建议是，更新这部分：

   <td class="text-center" id="ruta1">
     @Html.DisplayFor(modelItem => item.RUTA_1)
   </td>
   <td class="text-center" id="desborde1">
     @Html.DisplayFor(modelItem => item.DESBORDE_1)
   </td>
   <td class="text-center" id="concatenate">
     @Html.DisplayFor(modelItem => item.DESBORDES)
   </td>

为每列生成不同的 ID，例如 ruta1_1、ruta1_2、ruta1_3 使用末尾的索引。 （对desborde1重复相同的逻辑，并连接）

希望对你有帮助！

Answer 2

您没有具体说明为什么要使用 Javascript，而您使用的语法让我相信您使用的是 Blazor。

也许我遗漏了一些东西，但是像下面这样做似乎更容易，当 Blazor 可以为您完成所有这些时，不需要 JavaScript。这是 Blazor 和 Razor 语法存在的核心用例。

<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" id="ruta1">
                            @item.RUTA_1
                        </td>
                        <td class="text-center" id="desborde1">
                            @item.DESBORDE_1
                        </td>
                        <td class="text-center" id="concatenate">
                            @(item.RUTA_1 + " " +  item.DESBORDE_1)
                        </td>
                       
                    </tr>
                }
</table>