CODEWITHSUNDEEP
jqueryhtmlhtml-table
user1400
user1400

Reputation: 1409

Nested table with jQuery

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>

Upvotes: 1

Views: 4608

Answers (4)

Rohit
Rohit

Reputation: 1550

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>

Upvotes: 0

D.Nibon
D.Nibon

Reputation: 2919

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>

Upvotes: 0

Tomas Aschan
Tomas Aschan

Reputation: 60564

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.

Upvotes: 0

kafuchau
kafuchau

Reputation: 5593

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.

Upvotes: 1

Related Questions