javascript - 从表中删除行时，剩余的行向上/向下移动

Question

从表中删除行时遇到问题。
这是我使用的JS代码，如果有帮助的话。

function rem(el) {
    while (el.nodeName !== "TR") {
        el = el.parentNode;
    }
    el.parentNode.removeChild(el);
}  

表格是这样构建的:

<tr>
  <td>
    <span onclick="rem(this);"></span>
  </td>
</tr>  

当表格超过浏览器的高度并且出现滚动条时，就会出现此问题。

• 如果滚动条位于顶部并且我删除了一行，则剩余的行 会向上流动。

• 如果滚动条位于底部并且我删除了一行，则剩余的行 会流下来。

• 但是如果滚动条位于表格中间并且我删除了一行， 剩余的行将向上流动，直到滚动条到达底部 屏幕的。然后行将开始向下流动。我想 表格向上或向下流动。没关系 只要保持一致就可以。

由于我通过单击一行来删除它，因此表流必须保持一致。如果剩余的行以不同的方式移动，则用户很难预测下一行将是哪一行，是上面的行还是下面的行。

我的问题当然是“如何设置删除一行后剩余行的流动方式？”

如果我需要进一步解释该问题，请告诉我。

Answer 1

this is natural behavior自从:

• 如果您位于顶部(顶部的滚动条)，则删除一个元素并且行会向上移动。

• 如果你在底部(底部滚动条)，如果你删除元素，你当然会向上(因为没有什么可去的)

• 如果您位于中间，它自然会删除元素并将内容向上移动(与情况 1 一样)，如果您注意到更多内容需要向上移动，则适用情况 2。

现在，如果您的问题只是告诉用户删除项目后下一行是哪一行，我建议您使用颜色编码的行方案(此外，显示项目的 ID，例如任务 ID)任务)

另外，为了不用大量数据骚扰用户并且不知道接下来会发生什么，我建议您使用淡入淡出删除或上滑删除之类的东西，这样删除过程就不会突然(并且用户可以发现有东西被移除并取代了它的位置)。 jQueryUI 有很多这样的删除效果。