Вложенная таблица с 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

Благодарим за правильность написания аккордеона. Я не уверен, что это такое в наши дни, но я вижу «аккордеона» повсюду. –

Вы могли бы попробовать что-то вроде этого:

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

хотя и без получения дополнительной информации о том, что вы имеете в виду под «открытым» и «закрыть», трудно придумать что-то.

источник

2010-06-28 14:20:01

Я думаю, что вы хотите что-то нажать (.row-headline).

источник

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

ответ

Смежные вопросы