How to Implement Dynamic Table Row Expansion with jQuery?

Dynamic Table Row Expansion with jQuery

When working with tabular data, the ability to expand and collapse rows on demand can greatly enhance user interaction. In this scenario, you seek a solution to achieve this functionality when a specific header column is clicked.

Approach with Class Distinction

One approach is to assign a unique class to rows belonging to each header. When a header is clicked, you can use jQuery to locate its associated rows and apply a slideToggle() effect to either expand or collapse them. While this method is effective, managing multiple CSS classes can become cumbersome with numerous headers.

Alternative Approach: nextUntil()

A simpler alternative utilizes jQuery's nextUntil() function. By adding a "header" class to header rows, you can use the following code:

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

This function allows you to traverse the table rows beneath the clicked header until encountering another header. The slideToggle() effect is then applied to the matching rows, providing the desired expansion/collapse functionality.

Demo and Variations

The provided HTML and JavaScript codes demonstrate this approach. An additional example shows how to use a span element within the header to display ' ' or '-' icons to indicate expansion/collapse.

For a more dynamic effect, you can use a promise to toggle the icon/text after the toggle is completed in case of animated transitions.

Alternatively, a CSS pseudo element can be used to represent the expansion/collapse sign. When a header is clicked, a class is toggled on the header, and the table rows are expanded or collapsed accordingly.

These techniques provide flexible and efficient methods to expand/collapse table rows in response to header clicks.

The above is the detailed content of How to Implement Dynamic Table Row Expansion with jQuery?. For more information, please follow other related articles on the PHP Chinese website!