Twitter Bootstrap 在表格单元格上使用 collapse.js [几乎完成] [英] Twitter Bootstrap Use collapse.js on table cells [Almost Done]

问题描述

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

I am working on an accounts page that lists transactions (credits and debits). I would like the user to be able to click on a table row and it expands showing more information.

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

I am using twitter bootstrap and have looked over the documentation and this is the result I have

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

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

The only issue is that it displays the "dropdown information" in the wrong place, I would like to add in a new row, instead of printing at the top of the table

我也试过添加一个新的表格行(只显示行，没有折叠动作(只应用于第一行)

I have also tried adding in a new table row (which just displays the row, and no collapse action (only applied to first row)

 <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 某处看到了一个使用手风琴的示例.

I'm not sure you have gotten past this yet, but I had to work on something very similar today and I got your fiddle working like you are asking, basically what I did was make another table row under it, and then used the accordion control. I tried using just collapse but could not get it working and saw an example somewhere on SO that used accordion.

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

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

Since I need to post code here is what each collapsible "section" should look like ->

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

这篇关于Twitter Bootstrap 在表格单元格上使用 collapse.js [几乎完成]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！