我使用这个jQuery脚本:
$(function() {
$(".accordionjquery tr:not(.lineclic)").hide();
$(".accordionjquery tr:first-child").show();
$(".accordionjquery tr.lineclic").click(function(){
$(this).nextAll("tr").fadeToggle(100);
}).eq(0).trigger('click');
});
我的HTML脚本:
<table class="accordionjquery">
<tr class="lineclic">
<th>First Table</th>
<th></th>
</tr>
<tr>
<td>HIDE1</td>
<td></td>
</tr>
<tr>
<td>HIDE2</td>
<td></td>
</tr>
<tr>
<td>HIDE3</td>
<td></td>
</tr>
<tr>
<td colspan="2"><%= pie_chart @chart_enc %></td>
</tr>
</table>
<table class="accordionjquery">
<tr class="lineclic">
<th>Second Table</th>
<th></th>
</tr>
<tr>
<td>HIDE1</td>
<td></td>
</tr>
<tr>
<td>HIDE2</td>
<td></td>
</tr>
<tr>
<td>HIDE3</td>
<td></td>
</tr>
<tr>
<td colspan="2"><%= pie_chart @chart_enc %></td>
</tr>
</table>
有很多这样的表格。
当我的页面被加载时,我希望每个表都被隐藏,除了第一个tr(带有lineclic类),最后一个带有pie_chart。
已加载页面:
<table class="accordionjquery">
<tr class="lineclic">
<th>First Table</th>
<th></th>
</tr>
<tr>
<td colspan="2"><%= pie_chart @chart_enc %></td>
</tr>
</table>
<table class="accordionjquery">
<tr class="lineclic">
<th>First Table</th>
<th></th>
</tr>
<tr>
<td colspan="2"><%= pie_chart @chart_enc %></td>
</tr>
</table>
当我点击第一行时,会出现另一个tr
!
pie_chart
不支持resizing
,因为它不会重新加载。
您可以尝试:JSFiddle(仅隐藏第二个表格)
谢谢!
编辑:
感谢您Stiger
(trigger('click')
已删除)以获取每个表格并关闭#34; :
$(function() {
$(".accordionjquery tr:not(.lineclic)").hide();
$(".accordionjquery tr:first-child").show();
$(".accordionjquery tr.lineclic").click(function(){
$(this).nextAll("tr").fadeToggle(100);
}).eq(0);
});
现在,如何显示header and the last tr (with the rails script : pie_chart)
?