jquery - 可折叠的 Bootstrap 表格行

Question

我有一个表格，在每一行上显示一些信息，我想在您单击一行时创建几个隐藏的行，其中包含从可折叠的 Bootstrap 中显示的信息的详细信息。

我正在使用 bootstrap 2.3(现在无法更新)，这是我的表格的代码:

<table class="table table-striped" id="table_package">
 <thead>
   <tr>
     <th class="hidden-mobile">Name package</th>
     <th class="hidden-mobile">Minutes</th>
     <th class="hidden-mobile">Remaining</th>
     <th>Status</th>
     <th>Action</th>
     <th></th>
   </tr>
 </thead>
 <tbody>
     <tr id="package_id_1" data-toggle="collapse" data-target=".transactions_1"class="clickable collapsed">
       <td id="package_name_1" class="hidden-mobile">Intro</td>
       <td id="package_hours_1" class="hidden-mobile">240 minutes</td>
       <td id="package_remaining_1" class="hidden-mobile">0 minutes</td>
       <td id="confirmed_status_1"><span class="s_blue">finished</span></td>
       <td class="action-table "></td>
       <td></td>
     </tr>
     <tr class="out transactions_1 collapse">
       <td>Event</td>
       <td>Starting Time</td>
       <td>Remaining Time</td>
       <td>Date Time</td>
       <td></td>
     </tr>
 </tbody>

我已经尝试过这篇文章中的解决方案， How do I collapse a table row in Bootstrap? ，但它没有用。

本应从开头折叠的行没有折叠，即使我可以看到单击时正在应用的更改，但这些行没有任何反应。

Answer 1

我浏览了其他解决方案，找到了适合您的解决方案。

<table class="table table-striped" id="table_package">
 <thead>
   <tr>
     <th class="hidden-mobile">Name&nbsp;package</th>
     <th class="hidden-mobile">Minutes</th>
     <th class="hidden-mobile">Remaining</th>
     <th>Status</th>
     <th>Action</th>
     <th></th>
   </tr>
 </thead>
 <tbody>
     <tr id="package_id_1" data-toggle="myCollapse" data-target=".transactions_1">
       <td id="package_name_1" class="hidden-mobile">Intro</td>
       <td id="package_hours_1" class="hidden-mobile">240 minutes</td>
       <td id="package_remaining_1" class="hidden-mobile">0 minutes</td>
       <td id="confirmed_status_1"><span class="s_blue">finished</span></td>
       <td class="action-table "></td>
       <td></td>
     </tr>
     <tr class="transactions_1 myCollapse in">
       <td>Event</td>
       <td>Starting Time</td>
       <td>Remaining Time</td>
       <td>Date Time</td>
       <td></td>
     </tr>
 </tbody>
</table>

html稍微修改了一下，我用的css是这样的:

.myCollapse {
显示:无；
}
.myCollapse.in {
显示:表行；
}


这一点 javascript 完成了艰苦的工作:

$("[data-toggle=myCollapse]").click(函数( ev ) {
ev.preventDefault();
$(this.getAttribute('data-target')).toggleClass("in");
});

参见 my fiddle一个工作示例。