JQuery динамическая вставка строки для развернуть / свернуть

0

У меня есть структура таблицы следующим образом;

    <tr>
    <td><div class="icon-chevron-right"></div></td>
    <td><div>List 1</div></td>
    </tr>
    <tr>
    <td><div class="icon-chevron-right"></div></td>
    <td><div>List 2</div></td>
    </tr>

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

Как это сделать с помощью jQuery? Любые примеры для справки будут действительно полезны.

Теги:
accordion

2 ответа

0

в следующем примере создается новый tr (если не существует), содержащий элемент table под tr где находится значок с щелчком.

function createChildTable(string)
{
    return $('<table>').append(
        $('<tr>').append(
            $('<td>').append(string)
        )
    );
}

$('.icon-chevron-right').click(function() {
   var details = $(this).closest('tr').next('tr.details');
   if (details.length) details.show();
   else {
    // first time clicked
    details = $('<tr>').append( createChildTable('child table details') ).addClass('details');
    $(this).closest('tr').after(details);
  }
});

Пример ссылки

0

Я бы сказал, что есть два основных способа сделать это, и вам нужно будет выяснить, какой из них лучше для вас; это зависит.

То, о чем вы говорите, это добавить строку в DOM. В некоторых случаях это нормально, это зависит от того, для чего используется эта свернутая строка. Если вы хотите удалить свернутую строку и добавить ее снова, это может сделать вашу жизнь трудной, если вам нужно каждый раз восстанавливать весь внутренний HTML через JavaScript.

var collapseHTML = '<tr class="collapse"><td colspan="2">This is my new row</td></tr>';    

$('.icon-chevron-right').click(function() {
    $('.collapse').remove(); // Deletes all rows that has class "collapse"
    collapseHTML.insertAfter( $(this).closest('tr') ); // Inserts what stored in collapseHTML after "this closest tr"
});

Затем, как сказал кто-то другой, вы можете решить эту проблему, добавив эти строки из get go так:

<tr>
    <td><div class="icon-chevron-right"></div></td>
    <td><div>List 1</div></td>
</tr>
<tr class="collapse">
    <td colspan="2">This is my new row</td>
</tr>

Затем ваш css должен выглядеть так:

.collapse {
    display: none;
}

.collapse.active {
    display: block;
}

Это означает, что когда вы добавляете active класс в строку collapse, он display: none; из display: none; для display: block; , Это вы делаете с помощью JavaScript/jQuery:

$('.icon-chevron-right').click(function() {
    $('.collapse.active').removeClass('active'); // Removes active from all active collapsed rows
    $(this).closest('tr').next().addClass('active'); // adds active class to "this closest tr next element" (which is the collapse row)
});

Надеюсь это поможет!

Ещё вопросы

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