Есть ли плагин или библиотека для динамического изменения таблицы (js)?

Question

[GordeyMan]

Нужно при нажатии на строку таблицы, удалять строку и отображать ее на странице (возле таблицы).
При необходимости возвращать выбранную строку назад в таблицу.
Помню, где-то видел такой функционал, но не могу найти где.

Comments

[Андрей]

вы бы хоть пример показали картинкой

Answer 1

[coderisimo]

Отличный плагин для таблиц
https://datatables.net/examples/api/show_hide.html . Чего там только нет.
Но, фактически для данной задачи можно написать реализацию самостоятельно.

1) после клика - получаем данные из выбранной строки. Пример -

$(".for-click").click(function() {
// получаем данные из  строки из столбца с классом "nr"  , при клике на
// ячейке/кнопке/ссылке  с классом for-click. Этот элемент находится в таблице
    var $item = $(this).closest("tr")   // Finds the closest row <tr> 
                       .find(".nr")     // Gets a descendent with class="nr"
                       .text();         // Retrieves the text within <td>

   
});

пример

2) удаляем строку из таблицы. Пример -

// здесь в каждой строке есть кнопка для удаления, но можно отслеживать и просто клик на 
//строке таблицы
$("#tbUser").on('click', '.btnDelete', function () {
    $(this).closest('tr').remove();
});

3) создаем див с выбранными данными и показываем его. Пример -

//новоиспеченный див добавляется к элементу с ID myContainer
$('#myContainer').append('<div>Данные из удаленной строки</div>');

профит!

Comments

[GordeyMan]

спасибо, уже смотрел этот плагин раньше. Просто подумал может готовое решение есть, потому как не спец в этом деле.

[coderisimo]

GordeyMan: если нужно только то, что написали , мне кажется можно самому ). Я изложил алгоритм и примеры. А datatable сам часто использую (там удобно делать быстрый поиск. сортировку, добавлять разные элементы - куча всего!) :)

[GordeyMan]

coderisimo: вы знаете, попробовал, просто суперские впечатления. Спасибо что наставили на путь истинный :)

[coderisimo]

GordeyMan: Рад, что пригодилось. Вчера ради интереса написал вам сюда реализацию требуемого функционала на JQuery, но ,как оказалось, сообщение не добавилось. ))