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

Question

我正在一个列出交易（贷方和借方）的帐户页面上工作。我希望用户能够单击表格行，它会展开以显示更多信息。

我正在使用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>

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

我也尝试添加一个新表行（仅显示该行，并且没有折叠动作（仅应用于第一行）

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

Answer 1

我不确定您是否已经克服了这个问题，但是今天我必须进行一些非常相似的工作，并且像您所问的那样，我的小提琴正在工作，基本上我所做的就是在它下面再放一张桌子，然后使用了手风琴控制。我尝试仅使用折叠，但无法使其工作，并在SO上的某个地方看到了一个使用手风琴的示例。

由于我需要在此处发布代码，因此每个可折叠的“部分”应如下所示->

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