отмена одного действия undo
Добрый день, уважаемые коллеги. Прошу сильно не ругать, возможно тема уже 100 раз поднималась. Но все же прошу вашей помощи, так как не селен в jquery.
Есть таблица в которой есть кнопка удалить строку, как организовать отмену удаления (undo) на одно действие назад? Вот мой код: <table class="table" id="ex3"> <tbody> <tr> <th></th> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th class="nosort">header</th> </tr> <tr> <td class="remove_button"></td> <td>1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td class="remove_button"></td> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td class="remove_button"></td> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> <tr> <td class="remove_button"></td> <td>4-1</td> <td>4-2</td> <td>4-3</td> <td>4-4</td> </tr> </tbody> </table> тут js: let procRows = ex3.querySelectorAll("tbody .remove_button"); for (let i = 0; i < procRows.length; i++) { procRows[i].innerHTML += '<button><i class="far fa fa-times no-print" title="Скрыть строку"></i></button>'; } $(document).ready(function () { $('body').on('click', 'button', function () { $(this).closest('tr', '.title').remove('.title').fadeOut('slow'); }); }); Заранее спасибо. |
Dolf,
в строке 2 создать массив и заполнять его в строке 9, потом вытаскивать из массива нужные элементы и восстанавливать. |
рони,
Добрый день! Спасибо, за ответ. Попробую сделать. |
рони,
Я сделал вот так: $(document).ready(function() { var removedItems = []; $('.remove').click(function() { var removeItem = $(this).closest('tr').detach(); removedItems.push(removeItem); }); $('#undo').click(function() { if (removedItems.length) { var restoreItem = removedItems.shift(); $(this).append(restoreItem); } }); }); Но так у меня реально есть удаленные данные. Но я их вижу в <div> не в том месте где их удалил. Подскажите, как показать данные именно в том месте где удалил, то есть восстановить <tr> как я понимаю. Я же удаляю/скрываю именно <tr>. Может сможете пример показать? |
Цитата:
Цитата:
Соответственно. Но граничный случай - когда это последний элемент придется отработать отдельно... ;) |
отмена удалений
Dolf,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .remove_button:after { content: "del "; color: #FF0000; } </style> <script> let removedItems = []; document.addEventListener( "click" , ({target}) => { let elem; if(elem = target.closest(".remove_button")) { let {rowIndex} = tr = elem.parentNode; let table = tr.closest(".table") tr.remove(); removedItems.push({tr, rowIndex, table}) } if(elem = target.closest(".undo") && removedItems.length) { let {rowIndex, tr, table} = removedItems.pop(); table.insertRow(rowIndex).replaceWith(tr); } }); </script> </head> <body> <table class="table" id="ex3"> <tbody> <tr> <th></th> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th class="nosort">header</th> </tr> <tr> <td class="remove_button"></td> <td>1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td class="remove_button"></td> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td class="remove_button"></td> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> <tr> <td class="remove_button"></td> <td>4-1</td> <td>4-2</td> <td>4-3</td> <td>4-4</td> </tr> </tbody> </table> <button class="undo">undo</button> </body> </html> |
ksa,
Спасибо огромное за инфу! Буду читать, вникать. |
рони,
Не могу Вам еще плюс поставить. Пока скажу, спасибо огромное, Вы мне очень помогли! |
Dolf,
:thanks: |
Dolf,
#6 код стал немного короче |
Часовой пояс GMT +3, время: 07:49. |