Раскрывающаяся таблица внутри бутстрапа таблицы

Question

У меня есть таблица с множеством сущностей. Когда я нажимаю на одну из строк, я бы хотел, чтобы под ней отображалась другая таблица с подробностями о сущности.

Загрузка данных будет производиться с помощью Ajax, и я получил эту часть.

Как я подхожу к созданию таблицы в таблице?

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Name</th> 
      <th>Status</th> 
      <th>Contact Person</th> 
      <th>Phone</th> 
      <th>Email</th> 
      <th>Follow Up</th> 
      <th>Responsible</th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var partner in Model) 
     { 
      <tr> 
       <td id="@partner.Partner.Id" onclick="LoadPartnerData(@partner.Partner.Id)"><a href="#"><span class="glyphicon glyphicon-chevron-down"></span></a></td> 
       <td>@partner.Partner.Name</td> 
       <td>@partner.Partner.Status</td> 
       <td>@partner.Partner.PrimaryContactPerson</td> 
       <td>@partner.Partner.PrimaryContactPhone</td> 
       <td>@partner.Partner.PrimaryContactEmail</td> 
       <td>@partner.Partner.FollowUp.ToStandardDateString()</td> 
       <td>@partner.Partner.ResponsiblePerson</td> 
      </tr> 
      <table class="table table-striped hidden"> 
       <thead> 
        <tr> 
         <th></th> 
         <th>Report Id</th> 
         <th>Payment Date</th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th>Download</th> 
        </tr> 
       </thead> 
       <tbody id="table_@partner.Partner.Id"> 

       </tbody> 
      </table> 
     } 
    </tbody> 
</table> 

Answer 1

Вы можете поместить его в собственном tr, как:

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Name</th> 
      <th>Status</th> 
      <th>Contact Person</th> 
      <th>Phone</th> 
      <th>Email</th> 
      <th>Follow Up</th> 
      <th>Responsible</th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var partner in Model) 
     { 
      <tr> 
       <td id="@partner.Partner.Id" onclick="LoadPartnerData(@partner.Partner.Id)"><a href="#"><span class="glyphicon glyphicon-chevron-down"></span></a></td> 
       <td>@partner.Partner.Name</td> 
       <td>@partner.Partner.Status</td> 
       <td>@partner.Partner.PrimaryContactPerson</td> 
       <td>@partner.Partner.PrimaryContactPhone</td> 
       <td>@partner.Partner.PrimaryContactEmail</td> 
       <td>@partner.Partner.FollowUp.ToStandardDateString()</td> 
       <td>@partner.Partner.ResponsiblePerson</td> 
      </tr> 
      <tr> 
       <td colspan="8" class="further-information"> 
        <table class="table table-striped hidden"> 
         <thead> 
          <tr> 
           <th></th> 
           <th>Report Id</th> 
           <th>Payment Date</th> 
           <th></th> 
           <th></th> 
           <th></th> 
           <th></th> 
           <th>Download</th> 
          </tr> 
         </thead> 
         <tbody id="table_@partner.Partner.Id"> 

         </tbody> 
        </table> 
       </td> 
      </tr> 
     } 
    </tbody> 
</table> 

А затем переключить информацию в этом tr например по классу further-information.