CODEWITHSUNDEEP
javascripthtmlrow
Niklas
Niklas

Reputation: 13135

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

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.

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.

Upvotes: 0

Views: 598

Answers (2)

Joseph
Joseph

Reputation: 119837

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.

Upvotes: 1

trex005
trex005

Reputation: 5115

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>

Upvotes: 1

Related Questions