テーブルのブートストラップ内のドロップダウンテーブル

Question

多くのエンティティを持つテーブルがあります。その行の1つをクリックすると、そのテーブルの下に、エンティティの詳細が表示されます。

データのロードは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。