When removing rows from a table the remaining rows move up/down

Question

I have an issue when I remove rows from a table.
This is the JS code I use, if it is of any help.

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

The table is built like this:

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

The issue occurs when the table exceeds the browser's height and the scrollbar appears.

If the scrollbar is at the top and I remove a row, the remaining rows will flow up.
If the scrollbar is at the bottom and I remove a row, the remaining rows will flow down.
But if the scrollbar is in the middle of a table and I remove a row, the remaining rows will flow up until the scrollbar hits the bottom of the screen. Then the rows will start to flow down. I would like the table to either flow up or down. It doesn't matter which way as long as it stays consistent.

Since I remove a row by clicking on it, the table flow has to stay consistent. If the remaining rows move in different ways it's difficult for the user to predict which the next row will be, the one above or the one below.

My question is of course "How can I set in which way the remaining rows will flow after the deletion of a row?"

Let me know if I need to explain the issue further.

I think you need to control the scroll bar, check this: http://stackoverflow.com/questions/635706/how-to-scroll-to-an-element-inside-a-div — Simon Wang, Mar 07 '12 at 09:48
What you are describing sounds rather much like normal browser behavior, but it just might be me not understanding what you mean by "flow up" and "flow down". — seeming.amusing, Mar 07 '12 at 09:52

score 1 · Answer 1 · answered Mar 07 '12 at 09:53

It is actually has nothing to do with the behavior of the page, and all to do with how the browser scrolls.

Adding space at the bottom that is at least the height of your browser page should do the trick.

On most browsers just adding this to the bottom of your page will work:

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

score 1 · Accepted Answer · answered Mar 07 '12 at 09:58

this is natural behavior since:

if you are up top (scrollbar at the top), you remove an element and the rows shift up.
if you are down at the bottom (scrollbar at the bottom), if you remove the element, ofcourse you are going to go upwards (since there is nothing to go to)
if you are in the middle, it naturally removes elements and shifts stuff up (as with case 1) and if you have noting more to shift up, case 2 applies.

now, if your issue is just to tell the user which row was next after you deleted an item, i suggest you use a color-coded row scheme (additionally, show an id for the item, like say task ID for a task)

also, so as not to harass the user with many data and didn't know what was next, i suggest you employ something like a fade-remove or slideup-remove so the removal process is not abrupt (and the user can figure out that something is removed and took it's place). jQueryUI has a lot of these removal effects.

I'm going to try something but this would have to be the fall back if it doesn't work. Thanks. — Niklas, Mar 07 '12 at 10:06

When removing rows from a table the remaining rows move up/down

2 Answers2