Вложенная таблица с jQuery - PullRequest
Новая
       4

Вложенная таблица с jQuery

1 голос
/ 28 июня 2010

У меня есть таблица, подобная следующей, я хочу, чтобы сначала дочерние таблицы не видели но когда пользователь нажимает на строку, дочерняя таблица для других строк закрывается и дочерний стол под этой строкой открыт.

Как я могу сделать это с помощью 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>

Ответы [ 4 ]

1 голос
/ 28 июня 2010

Не совсем уверен, о чем вы просите, но встроенный jQuery Accordion UI может помочь сделать то, что вы просите ... Он позволяет вам расширять и сворачивать разделы. Таким образом, в каждом разделе вы можете поместить таблицу или несколько аккордеонов.

0 голосов
/ 21 января 2016

Мне нужно было что-то подобное, и ниже показано, как я это сделал.

<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>
0 голосов
/ 28 июня 2010

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

.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>
0 голосов
/ 28 июня 2010

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

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

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

...