jquery - 使用 JQuery 展开/折叠表格行

Question

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

这是我的表结构:

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

请提出一个合适的方法来实现这一目标。

Answer 1

你可以这样试试:-

给标题行一个类 say header，使用 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>

Demo

另一个例子:

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

Demo

在动画切换的情况下，您还可以使用 promise 在切换完成后切换跨度图标/文本。

$('.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伪元素来表示展开/折叠的标志，在header上切换一个类就可以了。

CSS:-

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

JS:-

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

Demo