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

Question

I would like to do a Rowspan the first column of my table.

My Current table looks like this:

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

What I want is to merge all the rows that have the same TYPE. For this example, I should get in the Type Column only two rows; Car and Bike. I know how to do the collapse, but the thing is that I'm getting my table from data base like this :

<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>

"I'm getting my table from data base" You're getting the entire HTML from the database, or Model? — Astrid E.
– Astrid E., Commented Feb 4, 2022 at 16:27

Richard Deeming · Accepted Answer · 2022-02-04 16:29:34Z

2

Group your data:

<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>

answered Feb 4, 2022 at 16:29

Richard Deeming

31.5k11 gold badges86 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fiad Over a year ago

Life saver!! it worked like magic. Thanks a million!!.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related