Как в таблице перемещать классы tr?

Question

[pcdesign]

Есть определенный класс в таблице, в tr.
И мне надо целиком его сместить вниз или вверх.

Вот моя попытка:


Например, если взять и нажать на "Комната 4 up", то срабатывает как надо пока не дойдет до шапки.
Вниз вообще не хочет корректно работать.

Например, есть комната "Кухня" и "Спальня". И в кухне есть товары. Я нажимаю на кнопку и кухня со всеми товарами стала ниже чем "Спальня", со всеми товарами.

Answer 1

[Александр Епихин]

Если таблица не большая то проще при нажатии на кнопки Up/Down полностью перерисовывать таблицу. Т.е. изначально вы имеете массив со значениями строкам, нажимаете на Up/Down, сортируете массив, а потом полностью отрисовываете таблицу согласно отсортированному массиву.

Comments

[#ямыnginx]

Что за бред? Смысл рисовать заново?

[Александр Епихин]

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

[pcdesign]

Александр Епихин, не вариант, таблица реально громадная.

[Александр Епихин]

Тогда так

[pcdesign]

Александр Епихин, в вашем примере тоже не работает :)

[pcdesign]

есть класс "tr_room_id1". Если я нажимаю на кнопку "Down", я хочу, чтобы класс "tr_room_id1" целиком опустился ниже предыдущего класса. Полностью, со всеми tr.

Например, есть комната "Кухня" и "Спальня". И в кухне есть товары. Я нажимаю на кнопку и кухня со всеми товарами стала ниже чем "Спальня", со всеми товарами.

[Александр Епихин]

Теперь понял как должно работать. Тогда строки комнат нужно обернуть в tbody. И двигать весь tbody. Это будет проще.

[pcdesign]

Александр Епихин, Спасибо большое! Ваша идея с tbody супер!
Вот в минимальном виде работает так:
https://codepen.io/AlexCodeLom/pen/OJVyKZW
Там еще можно сделать проверку, если элемент уже и так на последнем месте, но это уже не суть важно.