При удалении строк из таблицы оставшиеся строки перемещаются вверх / вниз

Question

У меня проблема при удалении строк из таблицы.
Это код JS, который я использую, если он мне поможет.

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

Таблица построена следующим образом:

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

Проблема возникает, когда таблица превышает высоту браузера и появляется полоса прокрутки.

• Если полоса прокрутки находится вверху, а я удаляю строку, остальные строки будут расти вверх.

• Если полоса прокрутки находится наВнизу, и я удаляю строку, остальные строки будут течь вниз.

• Но если полоса прокрутки находится в середине таблицы, и я удаляю строку, остальные строки будут течь дополоса прокрутки попадает в нижнюю часть экрана.Тогда ряды начнут стекать.Я хотел бы, чтобы таблица или текла вверх или вниз.Неважно, каким образом, пока он остается последовательным.

Поскольку я удаляю строку, щелкая по ней, поток таблиц должен оставаться согласованным.Если оставшиеся строки перемещаются по-разному, пользователю сложно предсказать, какой будет следующая строка, та, что выше, или та, что ниже.

Мой вопрос, конечно, «Как я могу установить, каким образом оставшиеся строки будут течь после удаления строки?»

Дайте мне знать, если мне нужночтобы объяснить проблему дальше.

Answer 1

это естественное поведение , поскольку:

• если вы находитесь наверху (полоса прокрутки вверху), вы удаляете элемент, и строки сдвигаются вверх.

• если вы находитесь внизу (полоса прокрутки внизу), если вы удалите элемент, конечно, вы пойдете вверх (поскольку идти нечего)

• если вы находитесь посередине, он естественным образом удаляет элементы и сдвигает вещи вверх (как в случае 1), а если вы заметили больше, чтобы сместиться вверх, применяется случай 2.

Теперь, если ваша проблема состоит только в том, чтобы сообщить пользователю, какая строка была следующей после того, как вы удалили элемент, я предлагаю вам использовать схему строк с цветовой кодировкой (дополнительно, покажите идентификатор для элемента, как, скажем, идентификатор задачи для задача)

также, чтобы не беспокоить пользователя множеством данных и он не знал, что будет дальше, я предлагаю вам использовать что-то вроде fade-remove или slideup-remove, чтобы процесс удаления не был резким (и пользователь может выяснить, что что-то снято и заняло свое место). В jQueryUI много таких эффектов удаления.

Answer 2

Это на самом деле не имеет ничего общего с поведением страницы и связано с тем, как браузер выполняет прокрутку.

Добавление пространства внизу, которое должно соответствовать высоте страницы вашего браузера, должно бытьхитрость.

В большинстве браузеров будет работать только добавление этого кода внизу страницы:

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