使用JQuery展开/折叠表行 [英] expand/collapse table rows with JQuery

问题描述

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

这是我的表结构：

 < table border =0> 
< tr> 
< td colspan =2>标头< / td> 
< / tr> 
< tr> 
< td> data< / td> 
< td> data< / td> 
< / tr> 
< tr> 
< td> data< / td> 
< td> data< / td> 
< / tr> 
< tr> 
< td colspan =2>标头< / td> 
< / tr> 
< tr> 
< td>日期< / 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类。

请建议一个合适的方法来实现这一点。

解决方案

你可以这样尝试： -

给一个类说 header 到标题行，使用nextUntil获取点击标题下的所有行，直到下一个标题。

JS

  $（'。header'）click（function（）{
 $（this）.nextUntil（'tr.header'） .slideToggle（1000）; 
}）; 
  

Html

 < table border =0> 
< tr class =header> 
< td colspan =2>标头< / 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）; //或只是使用toggle（）
}）; 
  

演示

您还可以使用promise在切换完成后切换span图标/文字（如果是动画切换）。

  $（'。header'）click（function（）{
 var $ this = $（this）; 
 $（this）。 nextUntil（'tr.header'）。slideToggle（100）.promise（）。done（function（）{
 $ this.find（'span'）。 b 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）; 
  

演示

I want to expand and collapse table rows when header columns is clicked. I only want to expand/collapse rows which are under the specific header (clicked).

Here is my table structure:

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

Any thoughts on how can I accomplish this task. Using div this task seems quite simple, but I have tabular data which I want to manipulate.

One idea I can think of is to use css class in every row which distinguish rows in under each header and use JQuery to expand/collapse those rows only when header is clicked. But if my table has 10-15 headers then it seems difficult to keep track of css classes.

Please suggest a suitable way to achieve this.

解决方案

You can try this way:-

Give a class say header to the header rows, use nextUntil to get all rows beneath the clicked header until the next header.

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

Another Example:

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

Demo

You can also use promise to toggle the span icon/text after the toggle is complete in-case of animated toggle.

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

Or just with a css pseudo element to represent the sign of expansion/collapse, and just toggle a class on the header.

CSS:-

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

JS:-

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

Demo

这篇关于使用JQuery展开/折叠表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！