使用JQuery展开/折叠表行

我想在单击标题列时展开和折叠表格行。我只想展开/折叠在特定标题(点击)下的行。

这里是我的表结构：

<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获取点击标题下的所有行，直到下一个标题。

$('.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>

Demo

另一个例子：

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

Demo

您还可以使用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 == '-' ? '+' : '-'
        });
    });
});

.promise()

.slideToggle()

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

CSS： –

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

JS： –

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

Demo

使用JQuery展开/折叠表行

解决方法

猜你在找的jQuery相关文章