свернуть / развернуть вложенные таблицы с помощью jquery

0

У меня есть требование свернуть/развернуть вложенные таблицы с помощью jquery (родительский, дочерний, большой ребенок и т.д.).

  1. Первоначально все родители будут рухнуты.
  2. Когда клик родителей, его ребенок только exapnd.

Посмотрите мой 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();
        })

    });

})

  • 2
    Какой вопрос? Похоже, вы просите нас написать код для вас. Сначала вам нужно попробовать это самостоятельно.
  • 0
    Не могли бы вы провести некоторое исследование и попробовать сами, мы с радостью поможем, если у вас возникла проблема, которую вы пытались решить для себя, но неохотно выполняете всю работу за вас.
Показать ещё 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();
});

Здесь скрипка

  • 0
    Спасибо, но когда я нажимаю на последнего ребенка, открывается его родитель,
  • 0
    @ VivekPoomala что-то вроде этого ?
Показать ещё 10 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню