與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嵌套表

回答

相關問題