0

jquery（親、子、孫など）を使用してネストされたテーブルを折りたたむ/展開する必要があります。

  1. 最初はすべての親が折りたたまれています。
  2. 親をクリックすると、その子のみが展開されます。

私のjsfiddleを見てください

http://jsfiddle.net/vivekcek/36SRa/

   <table border="1">
<thead>
    <tr>
        <td></td>
        <td>Header</td>
        <td>Header</td>
        <td>Header</td>
        <td>Header</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td><a href="#">[+]</a></td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>

    </tr>
    <tr>
        <td colspan="5">
            <table border="1">
                <tbody>
                    <tr class="parent">
                        <td><a href="#">[+]</a></td>
                        <td>Data</td>
                    </tr>
                    <tr class="child">
                        <td colspan="2">
                            <table border="1">
                                <tbody>
                                    <tr>
                                        <td><a href="#">[+]</a></td>
                                        <td>Data</td>
                                        <td>Data</td>
                                        <td>Data</td>
                                    </tr>
                                    <tr class="child">
                                        <td colspan="4">
                                            <table border="1">
                                                <thead>
                                                    <tr>
                                                        <td>Header</td>
                                                        <td>Header</td>
                                                        <td>Header</td>
                                                        <td>Header</td>
                                                        <td>Header</td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr class="parent">
                                        <td><a href="#">[+]</a></td>
                                        <td>Data</td>
                                        <td>Data</td>
                                        <td>Data</td>
                                    </tr>
                                    <tr class="child">
                                        <td colspan="4">
                                            <table border="1">
                                                <thead>
                                                    <tr>
                                                        <td>Header</td>
                                                        <td>Header</td>
                                                        <td>Header</td>
                                                        <td>Header</td>
                                                        <td>Header</td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr class="parent">
                        <td><a href="#">[+]</a></td>
                        <td>Data</td>
                    </tr>
                    <tr class="child">
                        <td colspan="2">
                            <table border="1">
                                <tbody>
                                    <tr>
                                        <td>[+]</td>
                                        <td>Data</td>
                                        <td>Data</td>
                                        <td>Data</td>
                                    </tr>
                                    <tr>
                                        <td colspan="4">
                                            <table border="1">
                                                <thead>
                                                    <tr>
                                                        <td>Header</td>
                                                        <td>Header</td>
                                                        <td>Header</td>
                                                        <td>Header</td>
                                                        <td>Header</td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>

</tbody>

私はこのようなjqueryを使用しています

  <script type="text/javascript">
$(document).ready(function () {

    function getChildren($row) {
        var children = [];
        while ($row.next().hasClass('child')) {
            children.push($row.next());
            $row = $row.next();
        }
        return children;
    }

    $('.parent').on('click', function () {

        var children = getChildren($(this));
        $.each(children, function () {
            $(this).toggle();
        })
    });

    $.each($('.parent'), function () {

        var children = getChildren($(this));
        $.each(children, function () {
            $(this).toggle();
        })

    });

})

4

1 に答える 1

4

親テーブル以外のすべてのテーブルを非表示にするには、次を使用できます。

$('table table').hide();

クリックしたアンカーの子テーブルを表示/非表示にするには、次の操作を実行できます。

$('td > a').on('click', function(e) {
  e.preventDefault(); // prevents the link from being followed
  $(this).closest('tr').next().find('table:first').toggle();
});

ここにフィドルがあります

于 2013-10-04T13:58:14.340 に答える