nested table with jquery

Question

hello

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 i could 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>

thanks

Answer 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.

Answer 2

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.

Answer 3

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>