Jquery replaceWith并返回原始

Jquery replaceWith and back to original

本文关键字：原始 返回 replaceWith Jquery      更新时间：2023-09-26

我试图用新行替换一行（tr），当按下新行中的图标时，我会返回到原始内容或行。我可以用新行替换原来的tr，但是，当按下V形圆圈时，我如何返回到原来的内容？

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);
});

谢谢！

所以我更改了一些内容来保存旧的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"中，以便能够恢复它。

相关文章：