Поменять элементы местами

@Alex_VP · Регистрация: 17.08.2011

Студворк — интернет-сервис помощи студентам

Доброго дня!
Есть шаблон такого рода (подробности, не относящиеся к делу, опущены):

HTML5
1
2
3
4
5
6
7
8
<table id="query_row">
<form id="8"><tr><td>...</td>
<td><img id="btntop8" src="up.png" title="Вверх"></td>
<td><img id="btnbottom8" src="down.png" title="Вниз"></td></tr></form>
<form id="5"> ... </form>
...
<form id="12">... </form>
</table>

id форм берутся из поля id таблицы БД, сортировка идет по другому полю, при нажатии на кнопки (картинки) идет запрос на сервер, где данная строка обменивается значением поля level с соседней строкой (соответственно "сверху" или "снизу" от себя). Следующий код ставится после каждой формы:

JavaScript
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
            $('#btntop5').click(function(){
                $.ajax({
                    url: "/admin.php",
                    type: "GET",
                    data: "ajax&mod=mysql_query_db&action=top&id=5",
                    cache: false,
                    success: function(data){
                        $(".ajax").html(data);
                        $("#8").before($("#5"));
                    }
                });
            });
 
            $('#btnbottom5').click(function(){
                $.ajax({
                    url: "/admin.php",
                    type: "GET",
                    data: "ajax&mod=mysql_query_db&action=bottom&id=5",
                    cache: false,
                    success: function(data){
                        $(".ajax").html(data);
                        $("#2").after($("#5"));
                    }
                });
            });

то есть идет отправка данных на сервер, там они выполняются и возвращаемый текст выводится в блоке. А вот after и before не работают с селектором, но прекрасно работают, если в них указан простой html/текст.
Видимо, я не правильно пытаюсь переместить один элемент до/после другого?

@Nazz · 12.11.2013, 12:07

Чтобы сделать правильно: after, before, Вам нужно применить схему:
1. Получаете содержимое блока который нужно переместить.
2. Удаляете блок.
3. Вставляете блок в необходимое место.

Только тогда все заработает.

@Alex_VP · 12.11.2013, 12:13 **[ТС]**

то есть вместо

JavaScript
1
$("#2").after($("#5"));

надо написать

JavaScript
1
2
3
var moveblock = $("#5");
$("#5").remove();
$("#2").after(moveblock);

правильно я понял?

@Nazz · 12.11.2013, 12:49

Сообщение от Alex_VP

3
4
5
var moveblock = $("#5");
$("#5").remove();
$("#2").after(moveblock);

в таком роде. Но мне кажется нужно будет так:

JavaScript
1
2
3
4
var moveblock = $("#5").html();
moveblock = '<div id="5">'+moveblock+'</div>';
$("#5").remove();
$("#2").after(moveblock);

@Alex_VP · 12.11.2013, 13:14 **[ТС]**

спасибо, примерно так уже и поправил, и, как я понял, вместо

JavaScript
1
2
var moveblock = $("#5").html();
moveblock = '<div id="5">'+moveblock+'</div>';

можно написать

JavaScript
1
var moveblock = $("#5").get(0);

Отследил в консоли firebug - похоже из-за того, что form оборачивает tr - .html() получает пустоту, а .get(0) - <form id="5"></form>. Попробую поменять верстку.

Добавлено через 15 минут
ЗЫ: да, убрал тэг формы, перенес id на tr - всё заработало.

Теперь другой вопрос. .prev и .next - смотрят соседние элементы во всем дереве, или можно задать рассматривать в контексте конкретного родительского элемента? Ведь нужно определить, какой элемент соседний с текущим, чтобы перенести строку до/после него. И возможно ли сделать проверку на существование предыдущего/следующего элемента?

$("#query_row > tr"); - так я нахожу первую строку в таблице
текущая строка с id="5" тогда
$("#5").prev(); - предыдущая строка
$("#5").туче(); - следующая строка
$("#query_row tr:first"); первая строка
$("#query_row tr:last"); последняя строка

так правильно я понимаю?

@Soldado · 12.11.2013, 15:21

Сообщение от Alex_VP

$("#query_row > tr"); - так я нахожу первую строку в таблице

Это не первая строка - это все строки на первом уровне вложенности

@Alex_VP · 12.11.2013, 15:37 **[ТС]**

Да, спасибо, уже сообразил...

вот такой вопрос в продолжение.
Надо сначала удалить элемент, потом вставить его содержимое на нужное место (пробовал наоборот - получил фиг). А значит надо как-то получить id элемента, предыдущего перемещаемому. Пробовал вот так - не выходит:

JavaScript
1
2
3
4
                        var moveblock = $("#curr").get(0);
                        var moveid = $("#curr").prev().attr("id").val();
                        $("#curr").remove();
                        $("#"+moveid).before(moveblock);

@Soldado · 12.11.2013, 15:57

Менять местами так - вырезаем элемент в переменную - detach() Затем после нужного элемента вставляем содержимое вырезанного элемента
пример

HTML5
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
<html>
  <head>
    <title>Меняем местами - но берём содержимое</title>
    
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />    
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    
 <script type="text/javascript">
$(document).ready(function(){
var block1=$('#block1').detach();
$('#block2').after(block1.html()); 
 });/*end  ready*/
 </script>
<style>
#block1{
width:600px;
height:50px;
margin-top:20px;
background:#c4fdc7;
border: 2px solid #2f7807
}
#block2{
width:600px;
height:50px;
margin-top:20px;
background:#d9e916;
border: 2px solid #220bf4
}
 
</style>    
  </head>
  <body style="padding-left:140px;">
<div id="block1"><span style="font-weight: bold">block1</span></div>
<div id="block2">block2</div>
  </body>
</html>

@Alex_VP · 12.11.2013, 16:33 **[ТС]**

Спасибо, примерно так оно и работает, но!.. строк в таблице много, в результате сортировок порядок их меняется, и следовательно я не могу вот так явно проставить id блока, до/после которого надо вставлять вырезанный блок. Хотя могу конечно, но в этом случае при выводе таблицы на сервере мне надо будет хранить одновременно значения трех строк, возвращенных из БД (предыдущая, текущая, следующая). И даже если я заморочусь и проставлю на сервере идентификаторы соответствующим строкам таблицы - после первой же перестановки строк местами порядок их следования изменится. То есть возвращаемся к вопросу: надо динамически получать элемент, предшествующий/последующий к указанному (перемещаемому).

Добавлено через 22 минуты
В таблице каждая строка имеет свой id
Однако допустим для последней строки

JavaScript
1
var moveid = $("#curr_id").prev("tr").attr("id");

возвращает undefined, словно у tr нет этого атрибута..

@Soldado · 12.11.2013, 16:34

Не совсем понял, что Вы хотите
Есть таблица с множеством строк при клике по строке она должна поменяться местами с той строкой, что ниже?
Нужны более детальные пояснения не прежде нужно исправить Ваш html код

HTML5
1
2
3
4
5
6
7
8
<table id="query_row">
<form id="8"><tr><td>...</td>
<td><img id="btntop8" src="up.png" title="Вверх"></td>
<td><img id="btnbottom8" src="down.png" title="Вниз"></td></tr></form>
<form id="5"> ... </form>
...
<form id="12">... </form>
</table>

В таблицу можно вкладывать строки и теги t... - <tbody>, <thead>, но не <form>

Вы хотите, чтобы перемещение было и в базе данных, а не только в браузере?

@Alex_VP · 13.11.2013, 15:06 **[ТС]**

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

HTML5
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<table id="query_row" class="query_row">
<tr id="5">
<td width=300px style='background-color:#cccccc'><b>Активный товар с IMG</b></td>
<td style='background-color:#cccccc'><img id="btntop5" src="/avpextra/img/up_16.png" title="Вверх"></td>
<td style='background-color:#cccccc'><img id="btnbottom5" src="/avpextra/img/down_16.png" title="Вниз"></td>
</td>
</tr>
    <script>
        $(document).ready(function(){
 
            $('#btntop5').click(function(){
                $.ajax({
                    url: "/artadmin.php",
                    type: "GET",
                    data: "ajax&mod=mysql_query_db&action=top&id=5",
                    cache: false,
                    success: function(data){
                        $(".ajax").html(data);
                        var moveblock = $("#5").get(0);
//                        var moveid = $("#5").prev("tr").attr("id");
var listitem = $("#5").index("tr") - 1;
                        $("#5").remove();
//                        $("#"+moveid).before(moveblock);
$("tr:eq(listitem)").before(moveblock);
                        $("#query_row tr:even td").css("background-color","#cccccc");
                        $("#query_row tr:odd td").css("background-color","transparent");
                        console.log(listitem);
                    }
                });
            });
 
            $('#btnbottom5').click(function(){
                $.ajax({
                    url: "/artadmin.php",
                    type: "GET",
                    data: "ajax&mod=mysql_query_db&action=bottom&id=5",
                    cache: false,
                    success: function(data){
                        $(".ajax").html(data);
                    }
                });
            });
 
        });
    </script>
<tr id="1">
<td width=300px ><b>Формат HTML рассылки</b></td>
<td ><img id="btntop1" src="/avpextra/img/up_16.png" title="Вверх"></td>
<td ><img id="btnbottom1" src="/avpextra/img/down_16.png" title="Вниз"></td>
</tr>
    <script>
        $(document).ready(function(){
 
            $('#btntop1').click(function(){
                $.ajax({
                    url: "/artadmin.php",
                    type: "GET",
                    data: "ajax&mod=mysql_query_db&action=top&id=1",
                    cache: false,
                    success: function(data){
                        $(".ajax").html(data);
                        var moveblock = $("#1").get(0);
//                        var moveid = $("#1").prev("tr").attr("id");
var listitem = $("#1").index("tr") - 1;
                        $("#1").remove();
//                        $("#"+moveid).before(moveblock);
$("tr:eq(listitem)").before(moveblock);
                        $("#query_row tr:even td").css("background-color","#cccccc");
                        $("#query_row tr:odd td").css("background-color","transparent");
                        console.log(listitem);
                    }
                });
            });
 
            $('#btnbottom1').click(function(){
                $.ajax({
                    url: "/artadmin.php",
                    type: "GET",
                    data: "ajax&mod=mysql_query_db&action=bottom&id=1",
                    cache: false,
                    success: function(data){
                        $(".ajax").html(data);
                    }
                });
            });
 
        });
    </script>
<tr id="6">
<td width=300px style='background-color:#cccccc'><b>Скрытый товар без IMG</b></td>
<td style='background-color:#cccccc'><img id="btntop6" src="/avpextra/img/up_16.png" title="Вверх"></td>
<td style='background-color:#cccccc'><img id="btnbottom6" src="/avpextra/img/down_16.png" title="Вниз"></td>
</tr>
    <script>
        $(document).ready(function(){
 
            $('#btntop6').click(function(){
                $.ajax({
                    url: "/artadmin.php",
                    type: "GET",
                    data: "ajax&mod=mysql_query_db&action=top&id=6",
                    cache: false,
                    success: function(data){
                        $(".ajax").html(data);
                        var moveblock = $("#6").get(0);
//                        var moveid = $("#6").prev("tr").attr("id");
var listitem = $("#6").index("tr") - 1;
                        $("#6").remove();
//                        $("#"+moveid).before(moveblock);
$("tr:eq(listitem)").before(moveblock);
                        $("#query_row tr:even td").css("background-color","#cccccc");
                        $("#query_row tr:odd td").css("background-color","transparent");
                        console.log(listitem);
                    }
                });
            });
 
            $('#btnbottom6').click(function(){
                $.ajax({
                    url: "/artadmin.php",
                    type: "GET",
                    data: "ajax&mod=mysql_query_db&action=bottom&id=6",
                    cache: false,
                    success: function(data){
                        $(".ajax").html(data);
                    }
                });
            });
 
        });
    </script>
<tr id="2">
<td width=300px ><b>Подписка на отсутствующий товар</b></td>
<td ><img id="btntop2" src="/avpextra/img/up_16.png" title="Вверх"></td>
<td ><img id="btnbottom2" src="/avpextra/img/down_16.png" title="Вниз"></td>
</tr>
    <script>
        $(document).ready(function(){
 
            $('#btntop2').click(function(){
                $.ajax({
                    url: "/artadmin.php",
                    type: "GET",
                    data: "ajax&mod=mysql_query_db&action=top&id=2",
                    cache: false,
                    success: function(data){
                        $(".ajax").html(data);
                        var moveblock = $("#2").get(0);
//                        var moveid = $("#2").prev("tr").attr("id");
var listitem = $("#2").index("tr") - 1;
                        $("#2").remove();
//                        $("#"+moveid).before(moveblock);
$("tr:eq(listitem)").before(moveblock);
                        $("#query_row tr:even td").css("background-color","#cccccc");
                        $("#query_row tr:odd td").css("background-color","transparent");
                        console.log(listitem);
                    }
                });
            });
 
            $('#btnbottom2').click(function(){
                $.ajax({
                    url: "/artadmin.php",
                    type: "GET",
                    data: "ajax&mod=mysql_query_db&action=bottom&id=2",
                    cache: false,
                    success: function(data){
                        $(".ajax").html(data);
                    }
                });
            });
 
        });
    </script>
</table>

вот тут я уже попробовал через селектор :eq, но снова безрезультатно. кроме кнопок вверх, вниз - есть кнопки выполнить, сохранить изменения, отменить изменения, удалить строку - с ними я уже разобрался, работают, поэтому отсюда из кода вырезал

Добавлено через 17 минут
Работает вот такой вариант:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
            $('#btntop5').click(function(){
                $.ajax({
                    url: "/artadmin.php",
                    type: "GET",
                    data: "ajax&mod=mysql_query_db&action=top&id=5",
                    cache: false,
                    success: function(data){
                        $(".ajax").html(data);
                        var moveblock = $("#5").get(0);
var listitem = $("#5").index("tr") - 1;
                        $("#5").remove();
$("tr:eq("+listitem+")").before(moveblock);
                        $("#query_row tr:even td").css("background-color","#cccccc");
                        $("#query_row tr:odd td").css("background-color","transparent");
                        console.log(listitem);
                    }
                });
            });

но для каждой строки срабатывает только один раз - при повторной попытке переместить вверх эту же строку никакого действия не происходит

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

Добавлено через 18 минут
Вобщем, пока решил вопрос добавлением

JavaScript
1
setTimeout('window.location.reload()',500);

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

Добавлено через 21 час 17 минут
Итак... перезагрузка страницы - это конечно отлично, но зачем тогда ajax? Как я понимаю, при удалении строки и вставке её копии - обработчики событий по кнопкам остаются привязанными к удаленным элементам. Решил и этот вопрос копированием и вставкой строки вместе с привязанными к строке функциями:
<tr>...</tr>
<script>...</script>
в таком виде не работало, так как строка удалялась, а привязанные к ней обработчики оставались. К новой же строке, копии удаленной - не оказывалось привязанных обработчиков. После того как сделал так:
<tr>...
<script>...</script>
</tr>
всё заработало.

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@Nazz 898 / 729 / 80 Регистрация: 12.03.2009 Сообщений: 2,804 Записей в блоге: 2
	12.11.2013, 12:07
	Чтобы сделать правильно: after, before, Вам нужно применить схему: 1. Получаете содержимое блока который нужно переместить. 2. Удаляете блок. 3. Вставляете блок в необходимое место. Только тогда все заработает. 0