Jak stworzyć komórki zagnieżdżonych wewnątrz tej samej tabeli TD

Question

Mam poniższej tabeli: -

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach(var permisionMag in Model.PermisionManagement) 
     { 
      <tr> 
       <td>@permisionMag.Name</td> 
       @{ 
        int i = 0; 
        <td class="f"> 
         @foreach(var item in permisionMag.TechnologyTypes.OrderBy(a => a.Name)) { 
          @(i+1) @item.Name 
          i = i + 1; 
         } 
         <br />   
        </td> 
       } 
      </tr> 
     } 
    </tbody> 
</table> 

Ale obecnie muszę drugą kolumnę się zagnieżdżać wiersze zamiast pokazywać wiersze wewnątrz samego TD? jakieś rady na ten temat?

Answer 1

Można użyć rowspan na pierwszej kolumnie :

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody>@foreach(var permisionMag in Model.PermisionManagement) { 
     <tr> 
      <td rowspan="@permisionMag.TechnologyTypes.Count()">@permisionMag.Name</td> 
      @{ 
      int i = 0; 
      foreach (var item in permisionMag.TechnologyTypes.OrderBy(a => a.Name)) 
      { 

       i = i + 1; 
       if(i > 1) { 
        </tr><tr> 
       } 
       <td class="f"> 
        @(i+1) @item.Name 
       </td> 
       } 
      } 
     </tr> 
     } 
    </tbody> 
</table> 

See expecting result

Mam nadzieję, że to pomoże.

Answer 2

Nie można generować bezpośrednio komórek tabeli, trzeba wygenerować nową tabelę wewnątrz drugiej komórki tabeli. Można również renderować @item.Name jako span/div i styl, który tworzy iluzję zagnieżdżonego stołu (jsFiddle example).

Answer 3

Jeśli rozumiem Twoje pytanie, to prawdopodobnie chcesz, aby to zrobić:

@foreach(var permisionMag in Model.PermisionManagement) { 
    <tr> 
    <td rowspan="@permisionMag.TechnologyTypes.Count()">@permisionMag.Name</td> 

    @{int i = 0; 
    @foreach (var item in permisionMag.TechnologyTypes.OrderBy(a => a.Name)) { 
     <td class="f"> 
      @(i+1) @item.Name 
      i = i + 1; 
     </td> 
     </tr> 
     <tr> 
     } 
    </tr> 
    } 
} 

Należy jednak zasadniczo zbudować coś takiego:

---------------- 
| Name | Item1 | 
|  | ----- | 
|  | Item2 | 
|  | ----- | 
|  | Item3 | 
|  | ----- | 
|  | Item4 | 
----------------