Question

我试图用新行替换行（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);
});

谢谢！

Answer 1

所以我改变了一些东西来保存旧的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的数据中以便稍后使用它，尽管如另一个答案所示，隐藏它将是最简单的解决方案。

请参阅以下内容。

＆＃13;

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

＆＃13;

<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>

＆＃13;

小提琴http://jsfiddle.net/05en6tga/

Answer 2

您是否考虑过隐藏行而不是替换它的可能性？您可以使用样式，也可以返回原始行，重新隐藏（或删除，由您自己决定）新行...

如果没有这个，有几种选择，例如，将原始内容保存在“var originalRow”中以便能够恢复它。

Jquery replaceWith并回归原创

2 个答案: