我正在工作的帐户页面,其中列出了交易(贷方和借方)。我希望用户能够点击一个表行,它会展开,显示更多信息。
我正在使用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/
唯一的问题是它在错误的位置显示"dropdown information“,我想添加一个新的行,而不是打印在表格的顶部
我还尝试添加一个新的表行(它只显示行,没有折叠操作(只应用于第一行))
<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>
干杯,谢谢你的帮助
发布于 2013-06-01 03:40:33
我不确定你是否已经解决了这个问题,但我今天必须做一些非常类似的工作,我让你的小提琴像你所问的那样工作,基本上我做的是在它下面做了另一个表格行,然后使用了手风琴控件。我试着使用折叠,但不能让它工作,并且在某个地方看到了一个例子,所以使用了accordion。
这是你最新的提琴: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>
发布于 2014-10-28 02:26:05
在Tony的answer上进行扩展,并回答Dhaval Ptl的question,为了获得真正的折叠效果并且一次只允许展开一行,可以像这样添加show.bs.collapse的事件处理程序:
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.in').collapse('hide');
});
我在这里修改了他的示例以完成此操作:http://jsfiddle.net/QLfMU/116/
发布于 2015-06-12 01:46:41
如果使用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/
我从这里得到了指令:Use AngularJS just for routing purposes
https://stackoverflow.com/questions/16389775
复制相似问题