如何在bootstrap中拥有多个可折叠行？(How to have multiple collapsable rows in bootstrap?)

我目前有一个包含多行的表。我想知道是否有一种方法可以在第一排（即汽车）下折叠几排（即宝马，丰田和本田），而不会移除“colspan”间距。我看到的所有示例似乎都必须丢失折叠行的格式。

<table class="table table-sm table-hover"> <thead class="thead-inverse"> <thead> <tr> <th colspan="6"></th> <th colspan="3">Current Month</th> <th colspan="3">Year-to-Date</th> </tr> </thead> <tbody> <tr data-toggle="collapse" data-target="#cars" class="accordion-toggle"> <th colspan="6">Cars</th> <td colspan="3">456 mi</td> <td colspan="3">700 mi</td> </tr> <tr class="hiddenRow"><div class="accordian-body collapse" id="cars"> <td colspan="1"></td> <td colspan="5">Toyota</td> <td colspan="3">534 mi</td> <td colspan="3">800 mi</td> </tr> <tr> <th colspan="1"></th> <th colspan="5">Honda</th> <td colspan="3">600 mi</td> <td colspan="3">770 mi</td> </tr> </div> </tbody> </table>

I currently have a table with multiple rows. I was wondering if there is a way to collapse several rows (i.e. BMW, Toyota, and Honda) under the first row (i.e. cars) with out remove the "colspan" spacing. All the example I have seen seems like you have to lose the formatting of the collapsed rows.

最满意答案

如果你使用bootstrap，你可能已经加载了jQuery，所以你可以使用它来查询和隐藏点击行。喜欢这个：

(function() { $('#carsTable .toggle').on('click', function() { $('#carsTable .hideableRow').toggleClass('hiddenRow'); }); })()

https://jsfiddle.net/q4w8062y/1/

另一种可能性，不确定它是否会按你的意愿工作，是将“toggler-row”放在另一个tbody或<table>的子<tbody>上，并使用<tbody>上的collapse类。喜欢这个：

https://jsfiddle.net/wkmmro89/1/

http://www.w3.org/TR/html-markup/table.html#table

If you use bootstrap you probably already have jQuery loaded, so you could use it to query and hide the rows on click. Like this:

(function() { $('#carsTable .toggle').on('click', function() { $('#carsTable .hideableRow').toggleClass('hiddenRow'); }); })()

https://jsfiddle.net/q4w8062y/1/

Another possibility, not sure it would work as you want, is to put the "toggler-row" on another tbody or as <table>'s child, and use the collapse class on <tbody>. Like this:

https://jsfiddle.net/wkmmro89/1/

http://www.w3.org/TR/html-markup/table.html#table

更多推荐