Question

我有一个表，它是从一个有很多列（大约30个）的数据库中填充的。有人想到的一个解决方案是在桌子上创建一个手风琴，每一行都是可点击的，并且手风琴向下，其余的列值得信息。我无法让Bootstrap为我做好这件事。

<table class="table table-hover">
    <thead>
        <th></th><th></th><th></th>
    </thead>

    <tbody>
        <tr data-toggle="collapse" data-target="#accordion" class="clickable">
            <td>Some Stuff</td>
            <td>Some more stuff</td>
            <td>And some more</td>
        </tr>
        <tr>
            <td>
                <div id="accordion" class="collapse">Hidden by default</div>
            </td>
        </tr>
    </tbody>
</table>

从jsfiddle可以看出，此功能无效。我不确定是什么问题，Bootstrap的文档没有详细说明崩溃。

非常感谢任何帮助，谢谢！

Answer 1

之前似乎已经提到过：

这可能会有所帮助：

Twitter Bootstrap Use collapse.js on table cells [Almost Done]

更新：

你的小提琴并没有加载jQuery，所以一切正常。

<table class="table table-hover">
<thead>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</thead>

<tbody>
    <tr data-toggle="collapse" data-target="#accordion" class="clickable">
        <td>Some Stuff</td>
        <td>Some more stuff</td>
        <td>And some more</td>
    </tr>
    <tr>
        <td colspan="3">
            <div id="accordion" class="collapse">Hidden by default</div>
        </td>
    </tr>
</tbody>
</table>

试试这个： http://jsfiddle.net/Nb7wy/2/

我还在详细信息行中添加了 colspan =＆＃39; 2＆＃39; 。但它本质上是你加载jQuery的小提琴（在左栏中的框架中）

Answer 2

对于那些来到这里寻找如何获得真正的手风琴效果并且一次只允许扩展一行的人来说，你可以像这样为show.bs.collapse添加一个事件处理程序：

$('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').collapse('hide');
});

我在此处修改了this示例：http://jsfiddle.net/QLfMU/116/

Answer 3

在接受的答案中，当隐藏可扩展行时，可见行之间会产生恼人的间距。您可以通过将其添加到css：

来摆脱它

.collapse-row.collapsed + tr {
     display: none;
}

＆＃39; +＆＃39;是adjacent sibling selector，因此如果您希望可扩展行成为下一行，则选择下一个名为collapse-row的tr。

这是更新的小提琴：http://jsfiddle.net/Nb7wy/2372/

使用Bootstrap创建手风琴表

3 个答案: