Форум

Dolf · #1 (**permalink**) 11.04.2021, 18:37

Добрый день, уважаемые коллеги. Прошу сильно не ругать, возможно тема уже 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');
    });
});

Заранее спасибо.

рони · #2 (**permalink**) 11.04.2021, 18:48

Dolf,
в строке 2 создать массив и заполнять его в строке 9, потом вытаскивать из массива нужные элементы и восстанавливать.

Dolf · #3 (**permalink**) 11.04.2021, 18:57

рони,
Добрый день! Спасибо, за ответ. Попробую сделать.

Dolf · #4 (**permalink**) 11.04.2021, 20:17

рони,
Я сделал вот так:

$(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>. Может сможете пример показать?

ksa · #5 (**permalink**) 11.04.2021, 20:56

Сообщение от Dolf

как показать данные именно в том месте где удалил

Помимо удаленного элемента запоминать еще элемент перед (или за) удаляемым элементом... А потом применять методы:

Цитата:

after() - Вставляет содержимое после выбранных элементов
before() - Вставляет содержимое перед выбранными элементами

http://uroki-jquery.ru/jquery-dobavlenie-elementov.html
Соответственно.

Но граничный случай - когда это последний элемент придется отработать отдельно...

рони · #6 (**permalink**) 11.04.2021, 21:11

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>

Dolf · #7 (**permalink**) 11.04.2021, 21:23

ksa,
Спасибо огромное за инфу! Буду читать, вникать.

Dolf · #8 (**permalink**) 11.04.2021, 21:25

рони,
Не могу Вам еще плюс поставить. Пока скажу, спасибо огромное, Вы мне очень помогли!

рони · #9 (**permalink**) 11.04.2021, 21:26

Dolf,

рони · #10 (**permalink**) 11.04.2021, 22:01

Dolf,
#6 код стал немного короче

Форум

Справочник

Discord чат

Курсы javascript