如何使折叠表行（与IE8支持也）？ [英] How to to make collapsing table rows (with IE8 support also)?
问题描述
当用户点击点击此处查看更多行之类的内容时，我希望折叠表格的最后两行。
在理解无法通过CSS2执行此操作，
I如果我想要IE8支持，我需要使用javascript / jquery。
我发现一个jquery手风琴的例子，并试图在表上实现它，但它没有真正的工作。
尝试使用< div class =open>来包装最后两行，但它didn 't工作（在jquery中几乎没有知识，只是试图补丁这个网站）。
在IE7如果不可能，我想所有的行都是collapased
< table border = 1>
< col style =width：120px; />
< col style =width：120px; />
< col style =width：120px; />
< col style =width：120px; />
< col style =width：120px; />
< thead>
< tr>
< th> 1< / th>
< th> 2< / th>
< th> 3< / th>
< th> 4< / th>
< th> 5< / th>
< / tr>
< / thead>
< tbody>
< tr class =open>
< td> a< / td>
< td> b< / td>
< td> c< / td>
< td> d< / td>
< td> e< / td>
< / tr>
< tr>
< td> a< / td>
< td> b< / td>
< td> c< / td>
< td> d< / td>
< td> e< / td>
< / tr>
< tr>
< td> a< / td>
< td> b< / td>
< td> c< / td>
< td> d< / td>
< td> e< / td>
< / tr>
< / tbody>
< / table>
javascript：
code> $（document）.ready（function（）{
$（'table'）。accordion（{collapsible：true，active：false，header：'.open'}）;
}）;
http://jsfiddle.net/4rkkksmd/4/
javascript：
$（'tr.btn td'）click（function（）{
$（'tr.hidden .slide'） .toggle（200）
}）;
html：
< table border =1>
< thead>
< tr>
< th> 1< / th>
< th> 2< / th>
< th> 3< / th>
< th> 4< / th>
< th> 5asdfasdfasdf< / th>
< / tr>
< / thead>
< tbody>
< tr class =btn>
< td colspan =5>点击我< / td>
< / tr>
< tr class =hidden>
< td>
< div class =slide>
asd
< / div>
< / td>
< td>
< div class =slide>
asd
< / div>
< / td>
< td>
< div class =slide>
asd
< / div>
< / td>
< td>
< div class =slider>
asd
< / div>
< / td>
< td>
< div class =slider>
asd
< / div>
< / td>
< / tr>
< tr class =hidden>
< td>
< div class =slide>
asd
< / div>
< / td>
< td>
< div class =slide>
asd
< / div>
< / td>
< td>
< div class =slide>
asd
< / div>
< / td>
< td>
< div class =slide>
asd
< / div>
< / td>
< td>
< div class =slide>
asd
< / div>
< / td>
< / tr>
< tr class =hidden>
< td>
< div class =slide>
asd
< / div>
< / td>
< td>
< div class =slide>
asd
< / div>
< / td>
< td>
< div class =slide>
asd
< / div>
< / td>
< td>
< div class =slide>
asd
< / div>
< / td>
< td>
< div class =slide>
asd
< / div>
< / td>
< / tr>
< tr>
< td> a< / td>
< td> b< / td>
< td> c< / td>
< td> d< / td>
< td> e< / td>
< / tr>
< / tbody>
< / table>
I want the last two rows of a table to be folded and collapse when user click on something like "Click Here to see more rows". that would appear as the last row of the first two rows, and turn into some toggle button if a user wants to fold them back.
After understanding there's no way to do this via CSS2 only, I guess that if I want IE8 support as well I would need to use javascript/jquery.
I found a jquery accordion example and tried to implement it on a table, but it didn't really work.
Tried wrapping up the last two rows with a <div class="open">` but it didn't work (barely have knowledge in jquery, just trying to patch this up for a website).
On IE7 if it's impossible, I want all the rows to be collapased from the start.
HTML:
<table border="1">
<col style="width:120px;" />
<col style="width:120px;" />
<col style="width:120px;" />
<col style="width:120px;" />
<col style="width:120px;" />
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr class="open">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
javascript:
$(document).ready(function () {
$('table').accordion({collapsible: true,active: false,header: '.open' });
});
http://jsfiddle.net/4rkkksmd/4/
javascript:
$('tr.btn td').click(function(){
$('tr.hidden .slide').toggle(200)
});
html:
<table border="1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5asdfasdfasdf</th>
</tr>
</thead>
<tbody>
<tr class="btn">
<td colspan="5">Click me</td>
</tr>
<tr class="hidden">
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
</tr>
<tr class="hidden">
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
</tr>
<tr class="hidden">
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
这篇关于如何使折叠表行（与IE8支持也）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
