使用 Bootstrap 创建手风琴表 [英] Creating Accordion Table with Bootstrap

问题描述

我有一个表，它是从一个包含很多列(大约 30 列)的数据库中填充的.有人想到的一个解决方案是在表格外创建一个手风琴，其中每一行都是可点击的，并且将与其余列的信息一起向下折叠.我无法让 Bootstrap 为我正确执行此操作.

I have a table that's populated from a database which has lots of columns (around 30). A solution someone thought of was to create an accordion out the table, where each row is clickable and will accordion downwards with the rest of the columns worth of information. I am having trouble getting Bootstrap to do this properly for me.

<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 的文档没有详细介绍折叠.

As you can see from the jsfiddle, this functionality is not working. Im not really sure what's wrong, and Bootstrap's docs don't go into much detail on collapsing.

如有任何帮助，将不胜感激，谢谢！

Any assistance would be greatly appreciated, thanks!

推荐答案

这个好像之前已经问过了:

This seems to be already asked before:

这可能有帮助:

Twitter Bootstrap 在表格单元格上使用 collapse.js[几乎完成]

更新:

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

Your fiddle wasn't loading jQuery, so anything worked.

<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='2' 添加到详细信息行.但它本质上是你的 jQuery 加载(在左栏中的框架中)

I also added colspan='2' to the details row. But it's essentially your fiddle with jQuery loaded (in frameworks in the left column)

这篇关于使用 Bootstrap 创建手风琴表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！