Dropdown-Tabelle innerhalb einer Tabelle Bootstrap

Question

Ich habe eine Tabelle mit vielen Entitäten in. Wenn ich auf eine der Zeilen klicken, würde ich gerne eine andere Tabelle mit Informationen über die Entität darunter fallen lassen.

Daten werden mit Ajax geladen, und ich habe diesen Teil abgedeckt.

Wie komme ich an die Erstellung einer Tabelle in einer Tabelle heran?

<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

Sie können es in einem eigenen tr setzen, wie:

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

Und dann schalten Sie die Informationen in diesem tr z.B. durch eine Klasse further-information.