首页 > 解决方案 > 如何使用foreach循环在html中的列内动态嵌套行?

问题描述

我正在尝试设计如下图所示的东西。但是我没有得到正确的设计,主要是显示不能嵌套在 . 我正在使用每个循环并尝试在列内加载数据动态行。

我的代码如下:

 <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> 
 @foreach (var items in Model.itemslist)  //conditions
            {
                if (items.id == 3)
                {
                    foreach (var itemsCheck in Model.itemslist)
                    {
                        if (itemsCheck.ICID == 4)
                        {
                            if (items.ICTID == itemsCheck.iParentID)
                            {                               
                                if (itemsCheck.FormID == items.FormID)
                                {
               
                <tr style="display: none">@{j = j + 1;}</tr>
                                }
                            }
                        }
                    }                    
                    if (j > 0)
                    {                    
               
                <tr>
                    <td>@items.Sno</td>

                    <td>@items.Parts</td>  //(partA or PArtB or PArt C -2nd column rows)

                    @foreach (var item in Model.itemslist)
                    {
                        if (items.ICTID == item.iParentID)
                        {
                            if (item.ICID == 4)
                            {
                                if (item.iSrc != -1)
                                {
                        <tr>    ------------------------------------------HEre I cannot able to nest <tr> inside <td>;Showing error                         
                        <td >@item.data</td>          //data1,data2.....
                        <td >@item.value</td>           //a1,a2,b1....
                        <td >@item.doublevalue</td>    //aa,bbb,cc....
                        <td >@item.lastvalue</td>       //aa1,aa2.bb1.....
                           </tr>
                                 }
                              }
                          }
                      }
                </tr>
                    }
            }
            }

在此处输入图像描述

如题,我的模型截图如下: 在此处输入图像描述

请帮助我获得我的结果设计,如图所示。提前致谢

PS:我尝试了rowspan,仍然没有修复

标签: htmlcssrazor

解决方案


推荐阅读