Nested table with jQuery

Question

I have a table like following code, I want at first the child tables not seen but when user click on the row the child table for other rows closed and child table under this row open.

How could I make this with jQuery?

<table class="mainTable">
   <thead>
      <tr class="header">
         <th style="width:33%">col1</th>
         <th style="width:33%">col2</th>
         <th style="width:33%">col3</th>
      </tr>
   </thead>


      <tr>
         <td class="even" colspan="3">
             <table class="childTable""> 
               <thead>
                  <tr>

                     <th style="width:33%">row1</th>
                     <th style="width:33%">row1</th>
                     <th style="width:33%">row1</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td></td>
                     <td>t1-row1</td>
                     <td>t1-row1</td>

                  </tr>
                  <tr>
                     <td></td>
                     <td>t1-row2</td>
                     <td>t1-row2</td>
                  </tr>

              </tbody>
              </table>
               </td>
     </tr>
     <tr>
     <td class="odd" colspan="3">
                <table class="childTable" > 
               <thead>
                  <tr>

                     <th style="width:33%">row2</th>
                     <th style="width:33%">row2</th>
                     <th style="width:33%">row2</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td></td>
                     <td>t2-row1</td>
                     <td>t2-row1</td>

                  </tr>
                  <tr>
                     <td></td>
                     <td>t2-row2</td>
                     <td>t2-row2</td>
                  </tr>

              </tbody>
              </table>
             </td>
     </tr>
</table>

kafuchau · Accepted Answer · 2010-06-28 14:19:28Z

1

Not entirely sure what you're asking for, but the built-in jQuery Accordion UI might help do what you're asking for... It allows you to expand and collapse sections. So, in each section, you could put a table, or more accordions.

answered Jun 28, 2010 at 14:19

kafuchau

5,6137 gold badges36 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter Ajtai Over a year ago

Thank you for spelling accordion correctly. I'm not sure what it is these days, but I see "accordian" everywhere.

Tomas Aschan · Accepted Answer · 2010-06-28 14:20:01Z

0

You could try something like this:

$('table.mainTable > tr').click(function() { 
    $(this).siblings().children('table').hide();
    $(this).children('table').show();
});

although without more information on what you mean by "open" and "close" it's hard to come up with something.

answered Jun 28, 2010 at 14:20

Tomas Aschan

61.2k62 gold badges268 silver badges425 bronze badges

Comments

D.Nibon · Accepted Answer · 2010-06-28 14:28:24Z

I think you want something to click on (.row-headline).

.mainTable tr table { display: none; }                                          
---                                                                             
$('.mainTable tbody>tr .row-headline').click(function({                         
 $(this).parent().siblings().children('table:visible').hide();
 $(this).siblings().show();                                                       
}));                                                                            
---                                                                             
<table class="mainTable">                                                       
 <thead>...</thead>                                                             
 <tbody>                                                                        
  <tr>                                                                          
   <td colspan="3">                                                             
    <h3 class="row-headerline">Row1</h3>                                        
    <table>...</table>                                                          
   </td>                                                                        
  </tr>                                                                         
  ...                                                                           
 </tbody>                                                                       
</table>

Rohit · Accepted Answer · 2016-01-21 18:12:22Z

I needed similar kind of thing and below is how I did it.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" >
    $(document).ready(function () {

        $('tr.tree-toggler').click(function () {
            $(this).parent().find('tr').eq(2).find('td.tree').toggle(300);
        });
    });

</script>
</head>
<body>

<table>
    <tbody>
    <tr>
        <td>

            <table>
                    <tbody>

                    <tr class="tree-toggler nav-header">
                        <td>
                            <table border="1" style="width: 100%">
                                <tbody>
                                    <tr class="tree-toggler nav-header">
                                        <td style="width: 30px;">
                                            Demo
                                        </td>
                                        <td style="width: 200px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td class="nav nav-list tree" style="display: none;">
                            <table class="table" border="1">
                                <tbody>
                                    <tr>
                                            <td style="width: 30px;">
                                            Demo
                                        </td>
                                        <td style="width: 200px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                    </tr>
                                    <tr>
                                            <td style="width: 30px;">
                                            Demo
                                        </td>
                                        <td style="width: 200px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td>        
            <table>
                    <tbody>

                    <tr class="tree-toggler nav-header">
                        <td>
                            <table border="1" style="width: 100%">
                                <tbody>
                                    <tr class="tree-toggler nav-header">
                                        <td style="width: 30px;">
                                            Demo
                                        </td>
                                        <td style="width: 200px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td class="nav nav-list tree" style="display: none;">
                            <table class="table" border="1">
                                <tbody>
                                    <tr>
                                        <td style="width: 30px;">
                                            Demo
                                        </td>
                                        <td style="width: 200px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 30px;">
                                            Demo
                                        </td>
                                        <td style="width: 200px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                    </tr>

                                    <tr>
                                        <td style="width: 30px;">
                                            Demo
                                        </td>
                                        <td style="width: 200px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                        <td style="width: 100px;">
                                            Demo
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>
</table>
</body>
</html>

Collectives™ on Stack Overflow

Nested table with jQuery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related