Question

我目前有一个包含多行的表格。我想知道是否有一种方法可以在第一排（即汽车）下折叠几排（即宝马，丰田和本田）而不用去除“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>

Answer 1

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

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

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

另一种可能性，不确定它是否会按你的意愿工作，就是把＃34; toggler-row＆＃34;在另一个人或<table>的孩子身上，并使用<tbody>上的崩溃课程。像这样：

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

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

如何在bootstrap中拥有多个可折叠行？

1 个答案: