Перемещение строк таблицы (jQuery)

Что бы при помощи jQuery переместить строку, выше или ниже, понадобятся методы .after(), .prev() для сдвига выше, .before(), .next() для сдвига ниже.

Пример

В качестве примера возьмем таблицу из 5 строк и строку с классом .move будем перемещать выше или ниже.

Перемещение будет осуществляться нажатиями на кнопки "Поднять выше" и "Опустить ниже".

Онлайн-пример.

<!DOCTYPE html><html><head><title>Перемещение строк таблицы (jQuery)</title><meta charset="utf-8"/> <script src="./script/jquery/jquery.js"></script> <script> $(document).ready(function() { var tr = $('.move'); var down = $('.down'); var up = $('.up'); up.click(function() { tr.after(tr.prev()); }); down.click(function() { tr.before(tr.next()); }); }); </script> </head><body> <table> <tr> <td>Строка 1</td> <td>Но чтобы вы поняли, откуда возникает это превратное представление людей, порицающих наслаждение и восхваляющих страдания, я раскрою перед вами всю картину и разъясню, что именно говорил этот человек, открывший истину, которого я бы назвал зодчим счастливой жизни. Действительно, никто не отвергает, не презирает, не избегает</td> </tr> <tr> <td>Строка 2</td> <td>наслаждений только из-за того, что это наслаждения, но лишь из-за того, что тех, кто не умеет разумно предаваться наслаждениям, постигают великие страдания. Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы само</td> </tr> <tr class="move"> <td>Строка 3</td> <td><strong>страдание только за то, что это страдание, а не потому, что иной раз возникают такие обстоятельства, когда страдания и боль приносят некое и немалое наслаждение. Если воспользоваться простейшим примером, то кто из нас</strong></td> </tr> <tr> <td>Строка 4</td> <td>стал бы заниматься какими бы то ни было тягостными физическими упражнениями, если бы это не приносило с собой некоей пользы? И кто мог бы по справедливости упрекнуть стремящегося к наслаждению, которое не несло бы с собой</td> </tr> <tr> <td>Строка 5</td> <td>никаких неприятностей, или того, кто избегал бы такого страдания, которое не приносило бы с собой никакого наслаждения?</td> </tr> </table> <button class="up">Поднять выше</button> · <button class="down">Опустить ниже</button> </body></html>

Категории

ПрограммированиеJavaScriptБиблиотекиjQuery

Читайте также

Комментарии