C# HTML 中的 Rowspan Table 行 'For loop' 基于特定值

Question

我想在 table 的第一列做一个 Rowspan。

我当前的 table 看起来像这样：

Type	Color	Num
Car	Red	1
Car	Black	2
Car	Black	3
Bike	Yellow	4
Bike	Green	5
Bike	Yellow	6

我想要的是合并所有具有相同TYPE 的行。对于这个例子，我应该在 Type Column 中只得到两行；汽车和自行车。我知道如何进行折叠，但问题是我正在从这样的数据库中获取 table :

<table class="table table-striped table-bordered " style="display:inline-table;"> 
<thead>
   <tr >     
        <th class="col-1">
                    Type
        </th> 
        <th class="col-2">
                    Color
        </th>
        <th class="col-2">
                  Num  
      </th>
    </tr>
</thead>
<tbody>

    @foreach (var item in Model)
    {
         <tr>
     
        <td>
          
                  @item.Type
        </td> 
        <td>
          
                  @item.Color
        </td>
        <td>
                  @item.Num
        </td>     
  
    </tr>
 
    }
</tbody>

    </table>

Answer 1

将您的数据分组：

<tbody>
@foreach (var group in Model.GroupBy(i => i.Type))
{
    var items = group.ToList();
    <tr>
        <td rowspan="@items.Count">@group.Key</td>
        <td>@items[0].Color</td>
        <td>@items[0].Num</td>
    </tr>
    @for (int index = 1; index < items.Count; index++)
    {
        <tr>
            <td>@items[index].Color</td>
            <td>@items[index].Num</td>
        </tr>
    }
}
</tbody>

C# HTML 中的 Rowspan Table 行 'For loop' 基于特定值

Rowspan Table rows in C# HTML with 'For loop' based on certain value

html

javascript

c#

linq

html-table