How to Dynamically Expand and Collapse Table Rows with jQuery?

Expanding and Collapsing Table Rows Dynamically with jQuery

Problem:

Expanding or collapsing table rows when a specific column header is clicked poses a challenge. To simplify this task, a custom CSS class can be used to distinguish rows within each header. However, managing multiple CSS classes for multiple headers can become cumbersome.

Solution:

To avoid the complexity of tracking multiple CSS classes, an alternative approach leverages the nextUntil() method in jQuery. This method retrieves all rows subsequent to the clicked header row, until the next header row is encountered.

Code Snippet:

<code class="javascript">$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});</code>

HTML Structure:

<code class="html">&lt;table border=&quot;0&quot;&gt;
  &lt;tr class=&quot;header&quot;&gt;
    &lt;td colspan=&quot;2&quot;&gt;Header&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;data&lt;/td&gt;
    &lt;td&gt;data&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;data&lt;/td&gt;
    &lt;td&gt;data&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code>

Example:

In this example, a class "header" is assigned to the header row. When a header row is clicked, the rows immediately below it are toggled between hidden and visible, using the slideToggle() method.

Additional Features:

• You can use a span element within the header row to display a " " or "-" sign, which toggles after the row is expanded or collapsed:

<code class="javascript">$('.header').click(function(){
    $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.header').slideToggle(100);
});</code>

• To toggle the span icon/text asynchronously after the toggle is complete, use the promise() of the slideToggle() method:

<code class="javascript">$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
    $this.find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
});</code>

• Alternatively, use a CSS pseudo element to represent the expansion/collapse sign and toggle a class on the header:

<code class="css">.header .sign:after{
    content:"+";
    display:inline-block;      
}
.header.expand .sign:after{
    content:"-";
}</code>

<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>

The above is the detailed content of How to Dynamically Expand and Collapse Table Rows with jQuery?. For more information, please follow other related articles on the PHP Chinese website!