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/

欢呼，并感谢您的帮助

Answer 1

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

Answer 2

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

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

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

Answer 3

如果您正在使用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只是为了路由的目的