与jQuery嵌套表

我有一个像下面的代码表，我想在第一个子表没有看到但当用户点击该行时，其他行的子表关闭，子表在此行打开。与jQuery嵌套表

我怎么能用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>

来源

2010-06-28 user1400

不完全知道你是问什么，但内置jQuery Accordion UI可以帮助你在问什么的......它可以让你展开和折叠部分。所以，在每一部分，你可以放一张桌子，或更多的手风琴。

来源

2010-06-28 14:19:28 kafuchau

谢谢你正确拼写手风琴。我不确定这些日子是什么，但我在任何地方都能看到“手风琴”。 – 2010-09-11 05:15:19

你可以尝试这样的事：

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

但如果没有你所说的“打开”和“关闭”什么的更多信息，很难拿出一些东西。

来源

2010-06-28 14:20:01

我想你想点击（.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>

来源

2010-06-28 14:28:24

我需要类似的东西，下面是我如何做到的。

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

来源

2016-01-21 18:12:22 Rohit

与jQuery嵌套表

回答

相关问题