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点击了最后一行中的Remove Me，它使用以下命令删除了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()
;

无论如何，在html表的最后一行显示隐藏的div

1 个答案: