从表中删除行时,其余行向上/向下移动

时间:2012-03-07 09:44:42

标签: javascript html row

从表格中删除行时出现问题 这是我使用的JS代码,如果它有任何帮助。

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

该表的构建如下:

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

当表格超出浏览器的高度并出现滚动条时,会出现问题。

  • 如果滚动条位于顶部,我删除了一行,剩余的行 会流了起来。

  • 如果滚动条位于底部,我会删除一行,其余行 会流下来。

  • 但是如果滚动条位于表格的中间并且我删除了一行, 剩余的行将向上流动,直到滚动条触及底部 的屏幕。然后行将开始向下流动。我想要 表格要么向上或向下流动。没关系 只要它保持一致,哪种方式。

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

我的问题当然是“如何设置删除行后剩余行会以哪种方式流动?”

如果我需要进一步解释这个问题,请告诉我。

2 个答案:

答案 0 :(得分:1)

它实际上与页面的行为无关,而与浏览器的滚动方式有关。

在底部添加至少是浏览器页面高度的空间应该可以解决问题。

在大多数浏览器上,只需将其添加到页面底部即可:

<div style='height:100%'>&nbsp;</div>

答案 1 :(得分:1)

this is natural behavior自:

  • 如果你在顶部(顶部的滚动条),你删除一个元素,然后行向上移动。

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

  • 如果你处于中间位置,它会自然地删除元素并移动内容(如案例1),如果你还有更多要提升的话,则适用案例2.

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

另外,为了不骚扰用户有很多数据并且不知道接下来会发生什么,我建议您使用类似淡入淡出或滑动删除的东西,以便删除过程不会突然(并且用户可以弄清楚某些东西被移除并占据了它的位置)。 jQueryUI有很多这些删除效果。