[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

nested table rows collapse/expand using jquery

Posted on 2012-09-10
14
Medium Priority
?
3,987 Views
Last Modified: 2012-11-25
I need help creating expandable/collapsible table rows using jquery.

The table structure is:
<table>
   <tr class="level1">
<td></td>
</tr>

<tr class="level2">
<td></td>
</tr>

<tr class="level3">
<td></td>
</tr>
<tr class="level4">
<td></td>
</tr>

</table>

So when i click 0n the level1 i want to close everything up until next level1, when level2 is clicked then level2 , level3, level4 is closed and so on
0
Comment
Question by:erikTsomik
  • 9
  • 5
14 Comments
 
LVL 25

Expert Comment

by:lwadwell
ID: 38385656
something like
<body>
    <table>
        <tr class="lvlcollapse" level="1">
            <td>Level 1 #1</td>
        </tr>
        <tr class="lvlcollapse" level="2">
            <td>Level 2 #1</td>
        </tr>
        <tr class="lvlcollapse" level="3">
            <td>Level 3 #1</td>
        </tr>
        <tr class="lvlcollapse" level="4">
            <td>Level 4 #1</td>
        </tr>
        <tr class="lvlcollapse" level="1">
            <td>Level 1 #2</td>
        </tr>
        <tr class="lvlcollapse" level="2">
            <td>Level 2 #2</td>
        </tr>
        <tr class="lvlcollapse" level="3">
            <td>Level 3 #2</td>
        </tr>
    </table>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function(){
        $(".lvlcollapse").click(function() {
            var level = $(this).attr("level");
            $(this).nextAll(".lvlcollapse").each(function() {
                var sublvl = $(this).attr("level");
                if ( sublvl > level ) {
                    $(this).toggle();
                } else {
                    return false;
                }
            });
	});
    });
</script>

Open in new window

0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38386988
IN each td I have an image. That image is what I am clicking on not the actual tr
0
 
LVL 25

Expert Comment

by:lwadwell
ID: 38387112
Oh ... you didn't mention that in the question.  Will the <img> be in the <td> in the <tr>?  It should still work ... have you tried?
If that is not what you want ... you will need to provide a more detailed description of the table and the behaviour you want.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 19

Author Comment

by:erikTsomik
ID: 38387180
here is my html. And i can not get it to work

            
            <table id="">
                  <tbody                  
                              <tr level="1" id="lvlcollapse" class="level1">
                                    <td><img width="20" height="20" src=""> Test 1</td>
                                    <td>09/15/2012</td>
                                    <td>
                                          0 % Complete
                                          
                                    </td>
                                    <td>
                                          
                                                &nbsp;
                                          
                                    </td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                              </tr>

                              
                                    <tr level="2" id="lvlcollapse" class="level2">
                                          <td>
                                                <table id="tblLevel2">
                                                      <tbody><tr>
                                                            <td>
                                                                  
                                                                        <img width="20" height="20" src=""> test1
                                                            </td>
                                                      </tr>
                                                </tbody></table>
                                          </td>
                                          <td>09/10/2012</td>
                                          <td>
                                                0 % Complete
                                                      
                                          </td>
                                          <td>
                                                
                                                      &nbsp;
                                                
                                          </td>
                                          <td>
                                                
                                          </td>
                                          <td>&nbsp;</td>
                                    </tr>

                                    
                                                      <tr level="3" id="lvlcollapse" class="level3">
                                                            <td>
                                                                  <table id="tblLevel4">
                                                                        <tbody><tr>
                                                                              <td>
                                                                                    
                                                                                          <img width="20" height="20" src="">test2
                                                                              </td>
                                                                        </tr>
                                                                  </tbody></table>
                                                            </td>
                                                            <td>09/10/2012</td>
                                                            <td>
                                                                  
                                                                        Past Due
                                                                  
                                                            </td>
                                                            <td>
                                                                  
                                                                        &nbsp;
                                                                  
                                                            </td>
                                                            <td>
                                                                  
                                                                        &nbsp;
                                                                  
                                                            </td>
                                                            <td>
                                                                  
                                                                        &nbsp;
                                                                  
                                                            </td>
                                                      </tr>

                                                      
                                                            
                                                                  <tr class="level4">
                                                                        <td align="center" colspan="6">text</td>
                                                                  </tr>
                                                            
                                                      <tr level="3" id="lvlcollapse" class="level3">
                                                            <td>
                                                                  <table id="tblLevel4">
                                                                        <tbody><tr>
                                                                              <td>
                                                                                    
                                                                                          <img width="20" height="20" src=""> test3
                                                                              </td>
                                                                        </tr>
                                                                  </tbody></table>
                                                            </td>
                                                            <td>09/10/2012</td>
                                                            <td>
                                                                  
                                                                        Past Due
                                                                  
                                                            </td>
                                                            <td>
                                                                  
                                                                        &nbsp;
                                                                  
                                                            </td>
                                                            <td>
                                                                  
                                                                        &nbsp;
                                                                  
                                                            </td>
                                                            <td>
                                                                  
                                                                        &nbsp;
                                                                  
                                                            </td>
                                                      </tr>

                                                      
                                                            
                                                                  <tr class="level4">
                                                                        <td align="center" colspan="6">text</td>
                                                                  </tr>
                                                            
                                    <tr level="2" id="lvlcollapse" class="level2">
                                          <td>
                                                <table id="tblLevel2">
                                                      <tbody><tr>
                                                            <td>
                                                                  
                                                                              <img width="20" height="20" src=""> test3
                                                            </td>
                                                      </tr>
                                                </tbody></table>
                                          </td>
                                          <td>09/15/2012</td>
                                          <td>
                                                
                                                            Not Complete
                                                      
                                          </td>
                                          <td>
                                                
                                                      &nbsp;
                                                
                                          </td>
                                          <td>
                                                
                                          </td>
                                          <td>&nbsp;</td>
                                    </tr>

                                    
                                                      <tr>
                                                            <td colspan="6">text</td>
                                                      </tr>
                                                
            </tbody></table>
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38387405
so is there any solutions to the problem
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38387809
I tried the code and partially working for me. So when I click to collapse first time the level1 it works , then when I click level to to collapse level 2 is collapsing then if click level 1 to expand it collapse the whole thing .
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38391426
any suggestions?
0
 
LVL 25

Expert Comment

by:lwadwell
ID: 38391497
Sorry .. I have been distracted on other things today.  I have been looking into it when I have had a chance.  As it is 1:30AM now, I will going to bed soon.

The way the code I wrote works is that it only collapses the rows below the row that is clicked if their level is less than the clicked ones.
If you collapsed the clicked row ... and you clicked on the first row ... there would be nothing left to click on to expand it again.  How would you propose to overcome that?

I have also been working on overcoming an issue I found with nested collapses as well.  Another change I am working on is removing the use of non-standard attribute names and using class names instead.
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38391585
good. I looking forward hearing from you
0
 
LVL 25

Accepted Solution

by:
lwadwell earned 2000 total points
ID: 38393751
Have a look at this.  Let me know your thoughts.
Q-27860185.zip
0
 
LVL 19

Author Closing Comment

by:erikTsomik
ID: 38395505
Perfect Thank you
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38418888
Hi lwadwell. I start testing the code and I ve noticed that if I click on any row that do not have  an icon I am still collapsing / expanding that row,. I there a way it can be fixed .

Thank you
test.txt
0
 
LVL 25

Expert Comment

by:lwadwell
ID: 38427164
Sorry ... been very sick the last few days.
Being click to collapse is driven by the existence of the 'lvlcollapse' class ... remove the class if you do not what the click event to be added.
If you want the icon ... they need to be added initially manually.  It may be possible to add them automatically, but as it is inside a table - there are many complications to consider.
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38631252
how can I make a only expand level 1
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question