JQuery заменить с и обратно на оригинал

Я пытаюсь заменить строку (tr) новой строкой, и, нажимая значок в новой строке, я возвращаюсь к исходному содержимому или строке. Мне удалось заменить исходное значение tr новой строкой, однако, как вернуться к исходному содержимому при нажатии на шеврон-круг-вправо?

HTML

<table class="full bowders list margin-top-15-alt">
 <tr class="line-bottom">
  <td class="list-check hide-mobile">
   <input type="checkbox" id="1" name="list">
   <label for="1"></label>
  </td>
  <td class="list-subject">
   <a href="">FC Barcelona - Club Brugge</a>
   <div>24/08/2014 - First Team - Match</div>
  </td>
  <td class="list-options float-right">
   <div class="show-mobile options-mob"><i class="fa fa-chevron-circle-right"></i></div>
  </td>
 </tr>
</table>

Jquery

$('.list .list-options').click( function() {
  var new_row = '<tr class="line-bottom"><td class="list-options float-right">DELETE<span class="mobile-option"><i class="fa fa-times"></i></span></td></tr>'
  $(this).parent().replaceWith(new_row);
});

Спасибо!

Источник

2 ответа

Решение

Поэтому я изменил несколько вещей, чтобы сохранить старый HTML.

var new_row = '<tr class="line-bottom"><td class="list-options deleted float-right">DELETE<span class="mobile-option"><i class="fa fa-times"></i></span></td></tr>';

$('.list').on('click', ' .list-options', function () {
    $p = $(this).parent();
    if (!$(this).hasClass('deleted')) {
        $p.replaceWith($(new_row).data('old', $p[0].outerHTML));
    } else {
        $p.replaceWith($(this).parent().data('old'));
    }
});

Вы можете заметить, что .on() структура изменилась. Эта новая форма также позволяет запускать ее при нажатии на динамически созданные элементы. Новый элемент также удалит класс.

Код кэширует старый html в данных jQuery, чтобы использовать его позже, хотя, как предлагается в другом ответе, скрыть его будет самым простым решением.

Смотрите это ниже в действии.

var new_row = '<tr class="line-bottom"><td class="list-options deleted float-right">DELETE<span class="mobile-option"><i class="fa fa-times"></i></span></td></tr>';

$('.list').on('click', ' .list-options', function() {
  $p = $(this).parent();
  if (!$(this).hasClass('deleted')) {
    $p.replaceWith($(new_row).data('old', $p[0].outerHTML));
  } else {
    $p.replaceWith($(this).parent().data('old'));
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="full bowders list margin-top-15-alt">
  <tr class="line-bottom">
    <td class="list-check hide-mobile">
      <input type="checkbox" id="1" name="list">
      <label for="1"></label>
    </td>
    <td class="list-subject"> <a href="">FC Barcelona - Club Brhghhgugge</a>

      <div>24/08/2014 - First Team - Match</div>
    </td>
    <td class="list-options float-right">
      <div class="show-mobile options-mob"><i class="fa fa-chevron-circle-right">delete</i>

      </div>
    </td>
  </tr>
  <tr class="line-bottom">
    <td class="list-check hide-mobile">
      <input type="checkbox" id="1" name="list">
      <label for="1"></label>
    </td>
    <td class="list-subject"> <a href="">FC Barcelona - Club Brugge</a>

      <div>24/08/2014 - First Team - Matchhghghg</div>
    </td>
    <td class="list-options float-right">
      <div class="show-mobile options-mob"><i class="fa fa-chevron-circle-right">delete</i>

      </div>
    </td>
  </tr>
  <tr class="line-bottom">
    <td class="list-check hide-mobile">
      <input type="checkbox" id="1" name="list">
      <label for="1"></label>
    </td>
    <td class="list-subject"> <a href="">FC Barcelona - Club Brugge</a>

      <div>24/08/2014 - First Team - Matchdsad</div>
    </td>
    <td class="list-options float-right">
      <div class="show-mobile options-mob"><i class="fa fa-chevron-circle-right">delete</i>

      </div>
    </td>
  </tr>
</table>

И скрипка http://jsfiddle.net/05en6tga/

Источник

Рассматривали ли вы возможность скрыть строку вместо ее замены? Вы можете использовать стили для этого, а также чтобы вернуть исходный ряд, повторно скрывая (или удаляя, это ваше дело) новый...

Без этого есть несколько альтернатив, например, сохранить исходный контент в "var originalRow", чтобы иметь возможность его восстановить.

Источник
Другие вопросы по тегам