Geek Answers Handbook

Foldable table in jQuery

I am trying to create a table with header lines that can be collapsed and expanded using jQuery. Here is the whole code of my code:

<html> <head> <script type="text/javascript" src="jquery.js"></script> <link href="styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { $("tr#cat1.header").click(function () { $("tr#cat1.child").each(function() { $(this).slideToggle("fast"); }); }); }); </script> </head> <body> <table> <tr id="cat1" class="header"> <td>Cat1</td> <td>Row</td> </tr> <tr id="cat1" class="child"> <td>data1</td> <td>data2</td> </tr> <tr id="cat1" class="child"> <td>data3</td> <td>data4</td> </tr> <tr id="cat2" class="header"> <td>Cat1</td> <td>Row</td> </tr> <tr id="cat2" class="child"> <td>data1</td> <td>data2</td> </tr> </table> </body> </html>

If I'm right, the part of jQuery in English reads like this: "When the line with the identifier" cat1 "and the class" header "is clicked, find all the lines with the identifier" cat1 "and the class" child ", and for each slideToggle."

However, when I run it and click on the title bar, nothing happens. Any insight?

EDIT: Added a second category to the HTML table. Sorry, I should have been more specific. I want to be able to click on the title bar for a specific category, and only compare those child lines, and not all the child lines on the page. Thus, the table behaves like a "harmonics", and the rows are grouped into categories.

+5
jquery html css
source share
4 answers

This will cause the click to affect only the rows in the table containing the title you clicked on, which means that you can change it to work with the css class instead of duplicating the identifier.

 $("tr#cat1.header").click(function () { $("tr#cat1.child", $(this).parent()).slideToggle("fast"); });

Basically this is the header that is clicked, we end it in a jQuery object and call parent() (which returns the table), and then point it as the context for the new query.

Your page looks something like this:

 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <link href="styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { $("tr.header").click(function () { $("tr.child", $(this).parent()).slideToggle("fast"); }); }); </script> </head> <body> <table> <tr class="header"> <td>Cat1</td> <td>Row</td> </tr> <tr class="child"> <td>data1</td> <td>data2</td> </tr> <tr class="child"> <td>data3</td> <td>data4</td> </tr> </table> <table> <tr class="header"> <td>Cat1</td> <td>Row</td> </tr> <tr class="child"> <td>data1</td> <td>data2</td> </tr> <tr class="child"> <td>data3</td> <td>data4</td> </tr> </table> </body> </html>
+8
source share

First, you should not have duplicate identifiers for strings. Identifiers must be unique for each element on the page.

In addition, you do not need to use each , since jQuery automatically applies the slideToggle function to each element that matches the selector. I would suggest dropping identifiers and using class names instead:

 $("tr.header").click(function () { $("tr.child").slideToggle("fast"); });

If you want to make sure that only certain tables can perform this switch function, put the class in the table and update the selector:

 <table class="collapsible"> <tr> <td>Cat1</td> <td>Row</td> </tr> <tr> <td>Collapsible</td> <td>Row</td> --- $(".collapsible tr:first").click(function () { $(this).nextAll().slideToggle("fast"); });

Reply to edit:

Rory's answer is correct, I'm just expanding it. If you use multiple tables, you can remove the CSS classes from <tr> in the rows and simplify the tables to:

 <table class="collapsible"> <tr> <td>Cat1</td> <td>Cat1</td> </tr> <tr> <td>Collapsible</td> <td>Row</td> </tr> </table> <table class="collapsible"> <tr> <td>Cat2</td> <td>Cat2</td> </tr> <tr> <td>Collapsible</td> <td>Row</td> </tr> </table>

and jQuery before:

 $(".collapsible tr:first").click(function () { $(this).nextAll().slideToggle("fast"); });
+7
source share

This is an @Rory answer extension for handling several levels of hierarchy, I also prefer fadeToggle to slideToggle as (at least in FF v24) when you have hundreds of rows in a table, then slideToggle does nothing for a second, and then all the rows suddenly disappear, which makes you wonder if you really clicked on the line. fadeToggle instantly starts fadeToggle lines so you know something is happening.

Instead of the child class, I use id for the direct parent, then you can recursively work through each branch. In addition, there is a “compensated” class that I use to correct the error of dropping the parent row when there is a child row that is already collapsed.

Please see the JSFiddle of the code below:

 <!DOCTYPE HTML> <html lang="en-US"> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { $('tr.header').click(function () { toggleRowChildren($(this), 'header'); }); function toggleRowChildren(parentRowElement, parentClass) { var childClass = parentRowElement.attr('id'); $('tr.'+childClass, parentRowElement.parent()).fadeToggle('fast'); $('tr.'+childClass).each(function(){ if ($(this).hasClass(parentClass) && !$(this).hasClass('collapsed')) { toggleRowChildren($(this), parentClass); } }); parentRowElement.toggleClass('collapsed'); } }); </script> </head> <body> <table class="table table-hover table-bordered"> <tr id="cat1" class="header"> <th>Cat1</th> <th>Row</th> </tr> <tr class="cat1"> <td>data1</td> <td>data2</td> </tr> <tr id="cat1a" class="header cat1"> <th>Cat1a</th> <th>Row</th> </tr> <tr class="cat1a"> <td>data1</td> <td>data2</td> </tr> <tr class="cat1a"> <td>data3</td> <td>data4</td> </tr> <tr id="cat2" class="header"> <th>Cat2</th> <th>Row</th> </tr> <tr class="cat2"> <td>data1</td> <td>data2</td> </tr> </table> </body> </html>
0
source share

Shouldn't it be bigger? I mean, this is usually the whole document.

  $("tr#cat1.header").click(function () { $("tr#cat1.child").slideToggle("fast"); });
-one
source share

More articles:


All Articles