Twitter Bootstrap在表单元格上使用collapse.js

我正在处理列出交易(贷方和借方)的帐户页面。 我希望用户能够点击一个表格行,并展开显示更多的信息。

我正在使用twitter bootstrap并查看了文档,这是我的结果

<table class="table table-striped" id="account-table"> <thead> <tr> <th>#</th> <th>Date</th> <th>Description</th> <th>Credit</th> <th>Debit</th> <th>Balance</th> </tr> </thead> <tbody> <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" class=""> <td>1</td> <td>05 May 2013</td> <td>Credit Account</td> <td class="text-success">$150.00</td> <td class="text-error"></td> <td class="text-success">$150.00</td> <div id="demo1" class="demo out collapse">Demo1</div> </tr> 

请参阅: http : //jsfiddle.net/2Dj7Y/

唯一的问题是,它显示的“下拉信息”在错误的地方,我想添加一个新的行,而不是打印在表的顶部

我也尝试添加一个新的表格行(这只是显示行,并没有崩溃的行动(只适用于第一行)

  <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" > <td>1</td> <td>05 May 2013</td> <td>Credit Account</td> <td class="text-success">$150.00</td> <td class="text-error"></td> <td class="text-success">$150.00</td> <tr id="demo1" class="demo out collapse"> <td>1</td> <td>05 May 2013</td> <td>Credit Account</td> <td class="text-success">$150.00</td> <td class="text-error"></td> <td class="text-success">$150.00</td> </tr> </tr> 

请参阅http://jsfiddle.net/ypuEj/

欢呼,并感谢您的帮助

我不确定你是否已经过去了,但是我今天必须要做一些非常类似的事情,而且我正在按照你的要求做你的小提琴工作,基本上我做的是在下面再做一个表格,然后用手风琴控制。 我尝试使用只是崩溃,但无法得到它的工作,并看到了一个例子在SO使用手风琴。

这是你更新的小提琴: http : //jsfiddle.net/whytheday/2Dj7Y/11/

因为我需要在这里发布代码是每个可折叠的“部分”应该看起来像 – >

 <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle"> <td>1</td> <td>05 May 2013</td> <td>Credit Account</td> <td class="text-success">$150.00</td> <td class="text-error"></td> <td class="text-success">$150.00</td> </tr> <tr> <td colspan="6" class="hiddenRow"> <div class="accordion-body collapse" id="demo1">Demo1</div> </td> </tr> 

拓展Tony的答案 ,并回答Dhaval Ptl的问题 ,为了获得真正的手风琴效果,并且一次只允许扩展一行,可以添加show.bs.collapse的事件处理程序,如下所示:

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

我修改他的例子来做到这一点: http : //jsfiddle.net/QLfMU/116/

如果您正在使用Angular的ng-repeat来填充表格,那么hackel的jquery片段将无法通过将其放置在文档加载事件中。 在angular度完成渲染表后,您需要运行代码片段。

在ng-repeat渲染后触发一个事件尝试这个指令:

 var app = angular.module('myapp', []) .directive('onFinishRender', function ($timeout) { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { $timeout(function () { scope.$emit('ngRepeatFinished'); }); } } } }); 

完整的angular度示例: http : //jsfiddle.net/ADukg/6880/

我从这里得到的指令: 使用AngularJS只是为了路由的目的