使用JQuery展开/折叠表行

前端之家收集整理的这篇文章主要介绍了使用JQuery展开/折叠表行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在单击标题列时展开和折叠表格行。我只想展开/折叠在特定标题(点击)下的行。

这里是我的表结构:

@H_502_4@<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类。

请建议一个合适的方法来实现这一点。

解决方法

你可以这样尝试: –

给一个类说标题标题行,使用nextUntil获取点击标题下的所有行,直到下一个标题

JS

@H_502_4@$('.header').click(function(){ $(this).nextUntil('tr.header').slideToggle(1000); });

Html

@H_502_4@<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>

Demo

另一个例子:

@H_502_4@$('.header').click(function(){ $(this).find('span').text(function(_,value){return value=='-'?'+':'-'}); $(this).nextUntil('tr.header').slideToggle(100); // or just use "toggle()" });

Demo

您还可以使用promise在切换完成后切换span图标/文本(如果是动画切换)。

@H_502_4@$('.header').click(function () { var $this = $(this); $(this).nextUntil('tr.header').slideToggle(100).promise().done(function () { $this.find('span').text(function (_,value) { return value == '-' ? '+' : '-' }); }); });

.promise()

.slideToggle()

或者只需使用css伪元素来表示展开/折叠的符号,并且只需切换标题上的类。

CSS: –

@H_502_4@.header .sign:after{ content:"+"; display:inline-block; } .header.expand .sign:after{ content:"-"; }

JS: –

@H_502_4@$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);

Demo

猜你在找的jQuery相关文章