我想在单击标题列时展开和折叠表格行。我只想展开/折叠在特定标题(点击)下的行。
这里是我的表结构：
<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
$('.header').click(function(){
$(this).nextUntil('tr.header').slideToggle(1000);
});
Html
<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在切换完成后切换span图标/文本(如果是动画切换)。
$('.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);