jquery - 有没有办法在 html 表格的最后一行显示隐藏的 div

Question

我有一个 html 表格。这是一个简化版本:

<table>
      <tr>
           <td><div style="display: none;" class="remove0">Remove Me</div></td>
      </tr>
      <tr>
           <td><div style="display: none;" class="remove1">Remove Me</div></td>
      </tr>
      <tr>
           <td><div class="remove2">Remove Me</div></td>
      </tr>
</table>

我有一个 Javascript，它单击最后一行中的“删除我”，然后使用以下方法删除 html 行:

$(this).parents("tr:first").remove();

问题是，当我删除最后一行时，我还希望“删除我”文本现在显示在第二行(现在是新的最后一行)。我将如何显示此 div，以便它动态显示新的最后一行中的“删除我”？

Answer 1

试试这个。给所有的 div 相同的类 - 从长远来看，这会简单得多。

<table>
  <tr>
       <td><div class="remove">Remove Me</div></td>
  </tr>
  <tr>
       <td><div class="remove">Remove Me</div></td>
  </tr>
  <tr>
       <td><div class="remove">Remove Me</div></td>
  </tr>
</table>

还有这个 JavaScript:

$('.remove')
    .click(function() {
        var $tr = $(this).closest('tr');
        $tr
            .prev()
            .find('.remove')
            .show()
        ;
        $tr.remove();
    })
    // hide all but the last one
    .slice(0, -1).hide()
;