Geek Answers Handbook

Using jQuery for slideToggle table row group

I am new to javaScript and jQuery, so hopefully this will be a quick fix. I need to display a table containing data that can be grouped into several categories, and I would like to implement a slide tug that hides / shows all the observations in each given category.

In the code below, it should (ideally) display a table with four columns and 9 rows, each group of 3 rows should precede the green line "Section i". I would like each section heading to work as a slide tug that expands or collapses all the lines below it. Nothing is crumbling right now. Any thoughts?

<head> <style type="text/css"> td{padding:5px;} </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(this).next(".section").slideToggle(); }); }); </script> </head> <body> <p> <table id="main_table"> <thead> <tr class="firstline"> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> </tr> </thead> <tbody> <tr style="background-color:green; color:white"> <td colspan="4" class="flip"> Section 1 </td> </tr> <div class="section"> <tr> <td>item 111</td> <td>item 112</td> <td>item 113</td> <td>item 114</td> </tr> <tr> <td>item 121</td> <td>item 122</td> <td>item 123</td> <td>item 124</td> </tr> <tr> <td>item 131</td> <td>item 132</td> <td>item 133</td> <td>item 134</td> </tr> </div> <tr style="background-color:green; color:white"> <td colspan="4" class="flip"> Section 2 </td> </tr> <div class="section"> <tr> <td>item 211</td> <td>item 212</td> <td>item 213</td> <td>item 214</td> </tr> <tr> <td>item 221</td> <td>item 222</td> <td>item 223</td> <td>item 224</td> </tr> <tr> <td>item 231</td> <td>item 232</td> <td>item 233</td> <td>item 234</td> </tr> </div> <tr style="background-color:green; color:white"> <td colspan="4" class="flip"> Section 3 </td> </tr> <div class="section"> <tr> <td>item 311</td> <td>item 312</td> <td>item 313</td> <td>item 314</td> </tr> <tr> <td>item 321</td> <td>item 322</td> <td>item 323</td> <td>item 324</td> </tr> <tr> <td>item 331</td> <td>item 332</td> <td>item 333</td> <td>item 334</td> </tr> </div> </tbody> </table> </p> </body>
+7
source share
1 answer

You cannot mix <div> with <table> like this, use additional <tbody> elements <tbody> . In your callback, this is a <td> element that has no siblings, so .next doesn't help anything; you want to go back until you reach what is at the same depth as .section , you are interested in, and then call .next from there.

Your HTML should look like this:

 <table id="main_table"> <thead> <tr class="firstline"> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> </tr> </thead> <tbody> <tr style="background-color:green; color:white"> <td colspan="4" class="flip"> Section 1 </td> </tr> </tbody> <tbody class="section"> <tr> <td>item 111</td> <td>item 112</td> <td>item 113</td> <td>item 114</td> </tr> <!-- ... -->

And your click handler looks like this:

 $('.flip').click(function() { $(this) .closest('tbody') .next('.section') .toggle('fast'); });

.closest returns your ancestors until it finds a <tbody> , and then you call .next .

Updated jsfiddle: http://jsfiddle.net/ambiguous/Udxyb/4/

+5
source

More articles:


All Articles