我想在单击标题列时展开和折叠表格行。我只想展开/折叠在特定标题(点击)下的行。
这里是我的表结构：
@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>另一个例子：
@H_502_4@$('.header').click(function(){ $(this).find('span').text(function(_,value){return value=='-'?'+':'-'}); $(this).nextUntil('tr.header').slideToggle(100); // or just use "toggle()" });您还可以使用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 == '-' ? '+' : '-' }); }); });或者只需使用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);