Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Uzver000
0 / 0 / 0
Регистрация: 20.12.2017
Сообщений: 40
1

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

09.02.2019, 18:32. Просмотров 194. Ответов 2

Всем привет. Я занимаюсь бэкэндом, но столкнулся с проблемой фронта и не знаю как решить.
Смотрите, есть таблица
Перемещение строк таблицы


Как мне сделать, чтобы когда я наводил мишку на эти цифры, я мог перетаскивать строки? По сути менять их очередность? Но при этом и цифры должны менять значение. Например если первый перетащить на третье место, то первый станет третьим,
изначально третий - вторым ну и соответственно изначально второй станет первым?

Вот шаблон
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
                             <table class="table table-borderless">
                        <thead>
                            <tr>
                                <th class="cell-small text-center" data-toggle="tooltip" title="Toggle all!"><input type="checkbox" id="check6-ll" name="check6-all"></th>
                                <th class="text-center">#</th>
                                <th>Username</th>
                                <th class="hidden-xs hidden-sm"><i class="fa fa-envelope-o"></i> Email</th>
                                <th class="hidden-xs hidden-sm">Firstname</th>
                                <th class="hidden-xs hidden-sm">Lastname</th>
                                <th class="cell-small text-center"><i class="fa fa-bolt"></i> Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center"><input type="checkbox" id="check6-td1" name="check6-td1"></td>
                                <td class="text-center">1</td>
                                <td><a href="javascript:void(0)">username1</a></td>
                                <td class="hidden-xs hidden-sm">user1@example.com</td>
                                <td class="hidden-xs hidden-sm">Name</td>
                                <td class="hidden-xs hidden-sm">Last</td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Details" class="btn btn-xs btn-info"><i class="fa fa-info-circle"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-center"><input type="checkbox" id="check6-td2" name="check6-td2"></td>
                                <td class="text-center">2</td>
                                <td><a href="javascript:void(0)">username2</a></td>
                                <td class="hidden-xs hidden-sm">user2@example.com</td>
                                <td class="hidden-xs hidden-sm">Name</td>
                                <td class="hidden-xs hidden-sm">Last</td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Details" class="btn btn-xs btn-info"><i class="fa fa-info-circle"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-center"><input type="checkbox" id="check6-td3" name="check6-td3"></td>
                                <td class="text-center">3</td>
                                <td><a href="javascript:void(0)">username3</a></td>
                                <td class="hidden-xs hidden-sm">user3@example.com</td>
                                <td class="hidden-xs hidden-sm">Name</td>
                                <td class="hidden-xs hidden-sm">Last</td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Details" class="btn btn-xs btn-info"><i class="fa fa-info-circle"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-center"><input type="checkbox" id="check6-td4" name="check6-td4"></td>
                                <td class="text-center">4</td>
                                <td><a href="javascript:void(0)">username4</a></td>
                                <td class="hidden-xs hidden-sm">user4@example.com</td>
                                <td class="hidden-xs hidden-sm">Name</td>
                                <td class="hidden-xs hidden-sm">Last</td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Details" class="btn btn-xs btn-info"><i class="fa fa-info-circle"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.02.2019, 18:32
Ответы с готовыми решениями:

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

Перемещение строк в таблице
Всем привет Вывожу таблицу с PHP циклом foreach надо сделать так, что бы можно было двигать все...

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

Перемещение картинки в ячейку таблицы по нажатию на кнопку
&lt;html&gt; &lt;head&gt; &lt;script language=&quot;JavaScript&quot;&gt; function TestFunc(f) { ...

Перемещение картинки из одной ячейки таблицы в другую при двойном щелчке мыши
Здравствуйте! Обращаюсь сюда за помощью, так как у меня не получается справиться с этой задачей. У...

2
Уф
654 / 620 / 386
Регистрация: 13.07.2015
Сообщений: 1,894
Завершенные тесты: 2
11.02.2019, 17:29 2
есть в готовом плагине, но коль у тебя интерфейс как я понял на пхп фреймворке генерируется, даже не знаю на сколько уместно будет js добавлять, ты хочешь им также id в базе поменять потом?
https://datatables.net/extensions/ro...on/simple.html
1
Uzver000
0 / 0 / 0
Регистрация: 20.12.2017
Сообщений: 40
12.02.2019, 11:37  [ТС] 3
НУ я не знаю... мне просто нужно как-то реализовать такой функционал... вот я и ищу варианты
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.02.2019, 11:37

Копирование строк из таблицы
Имеется html страница с таблицей, в каждой ячейке которой находится поле input со значением. Этот...

Раскрашивание строк таблицы
Добрый день. Подскажите пожалуйста возможно ли с помощью jqueri раскрасить строки таблицы таким...

Выделение строк таблицы.
Здраствуйте, у меня при выборе &quot;select&quot; происходит подсвечивание соответствующей строки таблицы, но...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru