Login/Register
Using jQuery to slideToggle a group of Table Rows
Asked Answered
Solved javascriptjqueryhtml-tableslidetoggle
M

1

7

I'm fairly 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'd like to implement a slideToggle that hides/reveals all of the observations in each given category.

The code below should (ideally) display a table with 4 columns and 9 rows, with every group of 3 rows preceded by a green "Section i" row. I would like each Section header to work as a slideToggle that expands or collapses all of the rows beneath it. Right now, nothing is collapsing. 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>
Magnate answered 24/2, 2011 at 23:24 Comment(3)
First: You cannot use div between table and td. Second: There is no element next() to the td.flip (it has no siblings). – Afb
I had real issues trying to do something similar with jQuery and tables, it seems tables don't really play ball that well so I ditched the table and used divs instead works much better :-) – Ostap
can you please post the final working code here? – Radiancy
C
5

You can't mix <div>s into a <table> like that, use additional <tbody> elements instead. In your callback, this is the <td> element which has no siblings so .next does nothing useful; you want to go back up until you get to something that is at the same depth as the .section you're interested in and then call .next from there.

Your HTML should look more 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 like this:

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

The .closest call goes back up your ancestors until it finds a <tbody> and then you call .next on that.

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

Chorea answered 25/2, 2011 at 3:39 Comment(3)
Note that the original question asks for slideToggle, which apparently doesn't work with this method. Changing toggle to slideToggle breaks the animation. jsfiddle.net/m83Pc – Carinacarinate
@supertrue: This was quite awhile ago so I'm not sure where the slideToggle to toggle switch came from. I suspect that the animation problem is a side effect of the usual display and nesting issues inside <table>. I'll poke around a bit and see what I can come up with. – Chorea
@supertrue: If you switch to slideToggle(10000) and watch the .section in a good DOM inspector, you'll see that the animation just adjusts the height. You'll also notice that <tbody> ignores height completely (sorry, I don't have a definitive reference for this) unless you change its display (jsfiddle.net/ambiguous/m83Pc/1) but that causes other strangeness. – Chorea

© 2022 - 2024 — McMap. All rights reserved.