Развернуть / свернуть таблицы HTML - PullRequest
Новая
       4

Развернуть / свернуть таблицы HTML

4 голосов
/ 06 апреля 2011

У меня есть HTML-таблица, которая динамически генерируется с сервера.

Я хочу, чтобы в этой html-таблице было развернуто / свернуто, то есть, когда я щелкаю по раскрытию, я должен получить новый столбец и строки, а при сжатии все должно быть так, как раньше.* Я не хочу использовать какой-либо сторонний плагин для него.Я хочу использовать jQuery и Ajax.

Можете ли вы помочь мне или предоставить какую-либо информацию о том, как я могу это сделать?

Ответы [ 3 ]

11 голосов
/ 06 апреля 2011

Хорошо, я думаю, что вопрос слишком неопределенный, чтобы на него можно было ответить полностью, если вы задумаетесь.

Откуда берется содержимое новых столбцов и строк?Какая у вас структура?Что ты уже пробовал?Что не сработало? Дэвид Томас комментарий.

Если вы не хотите использовать плагин jQuery, например , этот , это означает, что у вас будетсделать это самостоятельно и а) никто здесь не сделает это для вас полностью б) гораздо меньше без какой-либо информации, это было бы просто предположением.

При этом здесь приведен быстрый и грязный пример того, каким должен быть ваш подходкак.

HTML 

<table border="1">
    <tr class="clickable">
        <td colspan="2">Click to toggle Next</td>            
    </tr>
    <tr>
        <td>Test</td>
        <td>Test 2</td>
    </tr>
    <tr class="clickable">
        <td colspan="2">Click to toggle Next</td>            
    </tr>
    <tr>
        <td>Test</td>
        <td>Test 2</td>
    </tr>
    <tr class="clickable">
        <td colspan="2">Click to toggle Next</td>            
    </tr>
    <tr>
        <td>Test</td>
        <td>Test 2</td>
    </tr>
</table>

jQuery 

$(".clickable").click(function() {

    $(this).next().toggle();

});

Как я уже сказал, это просто пример , он не масштабируется (даже неподдерживает скрытие двух строк) вы можете увидеть демо здесь .

Я могу обновить ответ с более индивидуальным ответом, если вы обновите свой вопрос.

Но если выхочу построить его самостоятельно, вот что может пригодиться:

.show () .hide () .toggle () .animate () : п-й ребенок .children ()

и многие другие в зависимости от вашего подхода.

Удачи!

3 голосов
/ 06 апреля 2011

Вот быстрый пример, надеюсь, поможет, если я правильно понял ваш вопрос.

С этой структурой: 

 <a class="expand" href="#">Expand</a> | <a class="collapse" href="#">Collapse</a><hr />
<table id="mytable">
    <thead>
        <tr>
            <td>
                HEAD
            </td>
            <td>
                HEAD
            </td>
            <td>
                HEAD
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
        </tr>
        <tr>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
        </tr>
    </tbody>
</table>

Может быть, вы могли бы сделать что-то вроде этого: 

  $(document).ready(function () {
        $(".expand").click(function () {
            $("#mytable tbody").show("slow");
        });
        $(".collapse").click(function () {
            $("#mytable tbody").hide("fast");
        });
    });
0 голосов
/ 06 января 2017

Гармошка - это простое, элегантное решение: javascript и css.

Эта скрипка взята из объяснения W3Schools выше.

...