使用jquery折叠/展开嵌套表

Question

我需要使用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();
        })

    });

})

Answer 1

要隐藏除父表之外的所有表，您可以使用：

$('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();
});

Here's a fiddle