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/
欢呼声,并感谢您的帮助
Cheers, and thanks for your help
推荐答案
我不确定你是否已经完成了这项工作,但是我今天必须处理非常类似的事情,并且让你的小提琴像你问的那样工作,基本上我做的是制作另一个表格行在它下面,然后使用手风琴控制。我尝试使用刚刚崩溃,但无法得到它的工作,并看到了一个例子,在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/
Here's your updated fiddle: 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屋!