小编典典

使用JQuery扩展/折叠表行

html

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

这是我的表结构:

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

请提出实现此目标的合适方法。


阅读 295

收藏
2020-05-10

共1个答案

小编典典

您可以尝试这种方式:-

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>

另一个例子:

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

如果使用动画切换,则在切换完成后,还可以使用promise来切换跨度图标/文本。

$('.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);
2020-05-10