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

我正在做一个账户页面，上面列出了交易（贷项和借项）。 我想让用户能够点击一个表行，它展开显示更多信息

我正在使用twitter引导，并且已经查看了文档，这就是我得到的结果

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

#
日期
描述
信用
借记
平衡
1.
2013年5月5日
信用账户
$150.00
$150.00
演示1

见：

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

我还尝试添加一个新的表行（只显示该行，没有折叠操作（仅应用于第一行）

1.
2013年5月5日
信用账户
$150.00
$150.00
1.
2013年5月5日
信用账户
$150.00
$150.00

看

---

干杯，谢谢你的帮助

我不确定你是否已经克服了这一点，但我今天必须做一些非常类似的事情，我让你的小提琴像你要求的那样工作，基本上我做的是在它下面做另一排桌子，然后使用手风琴控制。我尝试使用just collapse，但无法使它工作，并看到一个声音例如，某个地方使用了手风琴

这是你最新的小提琴：

因为我需要在这里发布代码，所以每个可折叠的“部分”应该是这样的->

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

1.
2013年5月5日
信用账户
$150.00
$150.00
演示1

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

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

---

我在这里修改了他的示例：

如果您使用Angular的ng repeat填充表，则将hackel的jquery代码片段放入document load事件中将不起作用。您需要在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');
            });
        }
    }
}
});

完整的角度示例：

我从这里得到指令：

---

如何在折叠时删除双边框？添加

.hiddenRow{padding:0！important；}

但是，我想知道如何维护这些列。在示例中，一个列只有一个可用的跨列。数据目标实际上采用了css选择器，因此您可以使用类而不是id，并使每个列都具有该类，下面是一个示例：。不同之处在于，每个列中都有一个div，其中包含类demo1 and父行上的数据目标现在是“.demo1”，而不是“#demo1”。如果你搞砸了，我相信你会想出一个比我的示例更干净的解决方案。是否可以对行进行排序，以便附加的

DemoX

仍保留在正确的行上？如何折叠一行，当另一行单击时，前一行将取消折叠？快速单击两行表可以让你要同时打开两个手风琴窗格，有没有办法阻止它？很好，只要一个问题行（可折叠数据）边框会让它看起来很难看，有没有办法让它消失

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');
            });
        }
    }
}
});