单击标题栏时,我想展开和折叠表行。我只想展开/折叠特定标题下的行(单击)。
这是我的表结构:
<table border="0"> <tr> <td colspan="2">Header</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr> <td colspan="2">Header</td> </tr> <tr> <td>date</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> </table>
关于如何完成此任务的任何想法。使用div这个任务似乎很简单,但是我有要处理的表格数据。
我能想到的一个想法是在每行中使用css类,以区分每个标题下的行,并仅在单击标题时使用JQuery扩展/折叠这些行。但是,如果我的表有10-15个标题,那么似乎很难跟踪CSS类。
请提出实现此目标的合适方法。
您可以尝试这种方式:-
给header标题行说一个类,使用nextUntil来获取被单击标题下方的所有行,直到下一个标题为止。
header
$('.header').click(function(){ $(this).nextUntil('tr.header').slideToggle(1000); });
<table border="0"> <tr class="header"> <td colspan="2">Header</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr>
另一个例子:
$('.header').click(function(){ $(this).find('span').text(function(_, value){return value=='-'?'+':'-'}); $(this).nextUntil('tr.header').slideToggle(100); // or just use "toggle()" });
如果使用动画切换,则在切换完成后,还可以使用promise来切换跨度图标/文本。
$('.header').click(function () { var $this = $(this); $(this).nextUntil('tr.header').slideToggle(100).promise().done(function () { $this.find('span').text(function (_, value) { return value == '-' ? '+' : '-' }); }); });
或仅使用css伪元素来表示扩展/折叠的符号,只需在标头上切换一个类。
CSS:
.header .sign:after{ content:"+"; display:inline-block; } .header.expand .sign:after{ content:"-"; }
JS:-
$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);