从表格中删除行时出现问题 这是我使用的JS代码,如果它有任何帮助。
function rem(el) {
while (el.nodeName !== "TR") {
el = el.parentNode;
}
el.parentNode.removeChild(el);
}
该表的构建如下:
<tr>
<td>
<span onclick="rem(this);"></span>
</td>
</tr>
当表格超出浏览器的高度并出现滚动条时,会出现问题。
如果滚动条位于顶部,我删除了一行,剩余的行 会流了起来。
如果滚动条位于底部,我会删除一行,其余行 会流下来。
但是如果滚动条位于表格的中间并且我删除了一行, 剩余的行将向上流动,直到滚动条触及底部 的屏幕。然后行将开始向下流动。我想要 表格要么向上或向下流动。没关系 只要它保持一致,哪种方式。
由于我通过单击删除了一行,因此表流必须保持一致。如果剩余的行以不同的方式移动,则用户难以预测下一行将是哪一行,上一行或下一行。
我的问题当然是“如何设置删除行后剩余行会以哪种方式流动?”
如果我需要进一步解释这个问题,请告诉我。
答案 0 :(得分:1)
它实际上与页面的行为无关,而与浏览器的滚动方式有关。
在底部添加至少是浏览器页面高度的空间应该可以解决问题。
在大多数浏览器上,只需将其添加到页面底部即可:
<div style='height:100%'> </div>
答案 1 :(得分:1)
如果你在顶部(顶部的滚动条),你删除一个元素,然后行向上移动。
如果你在底部(底部的滚动条),如果你删除元素,当然你会向上(因为没有什么可去)
如果你处于中间位置,它会自然地删除元素并移动内容(如案例1),如果你还有更多要提升的话,则适用案例2.
现在,如果您的问题只是在删除项目后告诉用户下一行是哪一行,我建议您使用颜色编码的行方案(另外,显示该项目的ID,例如说明任务ID)任务)
另外,为了不骚扰用户有很多数据并且不知道接下来会发生什么,我建议您使用类似淡入淡出或滑动删除的东西,以便删除过程不会突然(并且用户可以弄清楚某些东西被移除并占据了它的位置)。 jQueryUI有很多这些删除效果。