Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.04.2021, 18:37
Интересующийся
Отправить личное сообщение для Dolf Посмотреть профиль Найти все сообщения от Dolf
 
Регистрация: 04.04.2021
Сообщений: 23

отмена одного действия 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');
    });
});


Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 11.04.2021, 18:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,420

Dolf,
в строке 2 создать массив и заполнять его в строке 9, потом вытаскивать из массива нужные элементы и восстанавливать.
Ответить с цитированием
  #3 (permalink)  
Старый 11.04.2021, 18:57
Интересующийся
Отправить личное сообщение для Dolf Посмотреть профиль Найти все сообщения от Dolf
 
Регистрация: 04.04.2021
Сообщений: 23

рони,
Добрый день! Спасибо, за ответ. Попробую сделать.
Ответить с цитированием
  #4 (permalink)  
Старый 11.04.2021, 20:17
Интересующийся
Отправить личное сообщение для Dolf Посмотреть профиль Найти все сообщения от Dolf
 
Регистрация: 04.04.2021
Сообщений: 23

рони,
Я сделал вот так:
$(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>. Может сможете пример показать?
Ответить с цитированием
  #5 (permalink)  
Старый 11.04.2021, 20:56
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,919

Сообщение от Dolf
как показать данные именно в том месте где удалил
Помимо удаленного элемента запоминать еще элемент перед (или за) удаляемым элементом... А потом применять методы:
Цитата:
after() - Вставляет содержимое после выбранных элементов
before() - Вставляет содержимое перед выбранными элементами
http://uroki-jquery.ru/jquery-dobavlenie-elementov.html
Соответственно.

Но граничный случай - когда это последний элемент придется отработать отдельно...
Ответить с цитированием
  #6 (permalink)  
Старый 11.04.2021, 21:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,420

отмена удалений
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>

Последний раз редактировалось рони, 11.04.2021 в 21:58.
Ответить с цитированием
  #7 (permalink)  
Старый 11.04.2021, 21:23
Интересующийся
Отправить личное сообщение для Dolf Посмотреть профиль Найти все сообщения от Dolf
 
Регистрация: 04.04.2021
Сообщений: 23

ksa,
Спасибо огромное за инфу! Буду читать, вникать.
Ответить с цитированием
  #8 (permalink)  
Старый 11.04.2021, 21:25
Интересующийся
Отправить личное сообщение для Dolf Посмотреть профиль Найти все сообщения от Dolf
 
Регистрация: 04.04.2021
Сообщений: 23

рони,
Не могу Вам еще плюс поставить. Пока скажу, спасибо огромное, Вы мне очень помогли!
Ответить с цитированием
  #9 (permalink)  
Старый 11.04.2021, 21:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,420

Dolf,
Ответить с цитированием
  #10 (permalink)  
Старый 11.04.2021, 22:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,420

Dolf,
#6 код стал немного короче
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
кнопка отмена предыдущего действия другой кнопки Fisher_OK jQuery 4 12.05.2018 00:43
как с помощью javascript взять данные из одного файла html и закинуть в другой? rusik Общие вопросы Javascript 10 08.08.2016 12:11
Отмена действия при повторном клике на checkbox Lutsk jQuery 3 02.04.2016 16:31
Отмена действия от hover ufaclub jQuery 10 09.03.2014 08:06
Отмена действия события во время выполнения анимации gunsoy Общие вопросы Javascript 2 12.06.2012 12:27