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.

Answer 1

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.