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

问题描述

我有一个表，从一个数据库填充有很多列（约30）。有人想到的解决方案是在表中创建一个手风琴，其中每一行都是可以点击的，并且可以向下折叠其余的信息列值。我无法获得Bootstrap为我做这个正确。

 < table class =table table-hover> 
< thead> 
< th>< / th>< th>< / th>< th>< / th> 
< / thead> 
 
< tbody> 
< tr data-toggle =collapsedata-target =＃accordionclass =clickable> 
< td>一些东西< / td> 
< td>一些更多的东西< / td> 
< td>还有一些< / td> 
< / tr> 
< tr> 
< td> 
< div id =accordionclass =collapse>默认隐藏< / div> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
  

您可以从 jsfiddle ，此功能不工作。我不知道有什么问题，Bootstrap的文档没有详细说明折叠。

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

$ b

这可能有帮助：

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

UPDATE：

没有加载jQuery，所以任何工作。

 < table class =table table-hover> 
< thead> 
< tr> 
< th>< / th> 
< th>< / th> 
< th>< / th> 
< / tr> 
< / thead> 
 
< tbody> 
< tr data-toggle =collapsedata-target =＃accordionclass =clickable> 
< td>一些东西< / td> 
< td>一些更多的东西< / td> 
< td>还有一些< / td> 
< / tr> 
< tr> 
< td colspan =3> 
< div id =accordionclass =collapse>默认隐藏< / div> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
  

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

我也添加了 colspan ='2'强>到详细信息行。但它本质上是你的小提琴加载jQuery（在左栏中的框架）

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>

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:

This might help:

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

UPDATE:

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>

Try this one: http://jsfiddle.net/Nb7wy/2/

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屋！