Оглавление скрыть


Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


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

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

Пример

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!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>
Опубликовано: 31 июля 2013  ·  Автор: Артём Фёдоров  ·  3934 просмотра

Категория

ГлавнаяПрограммированиеJavaScriptБиблиотекиjQueryПеремещение строк таблицы (jQuery)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

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

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания