如何使用foreach循环在HTML表格列内动态嵌套行并解决tr嵌套报错

核心问题原因 #

你遇到的报错是HTML语法规范问题：<tr> 是表格行元素，只能作为 <table>/<tbody> 等表格容器的直接子节点，禁止嵌套在 <td> 元素内部。你之前用rowspan没生效大概率是没有提前统计每个父项对应的子数据行数，导致rowspan赋值错误。

实现思路 #

1. 提前对数据做分组：先遍历数据把所有id=3的父项，和对应的ICID=4、iParentID匹配、iSrc!=-1的子项做关联，同时统计每个父项对应的子项总数，用来给rowspan赋值。
2. 渲染表格的时候，父项的第一、二单元格用rowspan设置为子项总数，第一行渲染父项的序号、部件名+第一个子项的4个数据，后续子项直接渲染成独立的<tr>，只写后面4个<td>即可。

修正后的完整代码 #

<!-- 表头部分 -->
<tr>
    <th>S no</th>
    <th>heading 1</th>
    <th>heading 2</th>
    <th>heading 3</th>
    <th>heading 4</th>
    <th>heading 5</th>       
</tr> 
@{
    // 提前预处理分组数据，避免嵌套循环逻辑混乱
    var parentItems = Model.itemslist.Where(x => x.id == 3).ToList();
    foreach (var parent in parentItems)
    {
        // 筛选当前父项对应的所有符合条件的子项
        var childItems = Model.itemslist
            .Where(x => x.ICID == 4 
                    && x.iParentID == parent.ICTID 
                    && x.FormID == parent.FormID
                    && x.iSrc != -1)
            .ToList();
        // 没有符合要求的子项就跳过当前父项
        if(!childItems.Any()) continue;
        
        // 渲染第一行：前两格设置跨行，后面放第一个子项的数据
        <tr>
            <td rowspan="@childItems.Count">@parent.Sno</td>
            <td rowspan="@childItems.Count">@parent.Parts</td>
            <td>@childItems[0].data</td>
            <td>@childItems[0].value</td>
            <td>@childItems[0].doublevalue</td>
            <td>@childItems[0].lastvalue</td>
        </tr>
        // 渲染剩余子项的行，不需要重复写前两格
        for(int i = 1; i < childItems.Count; i++)
        {
            <tr>
                <td>@childItems[i].data</td>
                <td>@childItems[i].value</td>
                <td>@childItems[i].doublevalue</td>
                <td>@childItems[i].lastvalue</td>
            </tr>
        }
    }
}

上述代码把数据预处理和渲染逻辑拆开，避免了多层嵌套if的混乱，也完全符合HTML表格的语法规范，不会再出现<tr>嵌套的报错，同时rowspan的取值是实际子项的数量，合并效果完全匹配设计图要求。

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