Работа с таблицами

@fidel42rus · Регистрация: 24.10.2015

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

Всем добрый день)
Заранее очень благодарен что вы посетили мою тему, спасибо за внимание
Друзья, с ajax и js у меня совсем плохо. Разобраться пробовал не вышло, галиматья получается
Суть проблемы в следующем:
На странице две таблицы, Склад и Резерв
В складе есть позиции, при нажатии на которые строку надо убирать из склада и переносить в резерв, допустим по кнопке "Добавить"
Таблица склад заполняется ниже приведенным кодом:

PHP/HTML
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
<table class="table table-hover" id="sklad">   
      <thead>
        <tr>
            <th>№ п/п</th>
            <th>Название</th>
             <th>Код</th>
            <th>сортировка</th>
                      <th>Кол-во </th>
                      <th>Действия</th>
                    </tr>
    </thead>   
    <tbody>
    <?php
$pp = 1;
$resultprov = mysql_query("SELECT * from sklad");
while ($row = mysql_fetch_array($resultprov, MYSQL_ASSOC)) {
echo "<tr>";
  echo "<td>".$pp."</td>";
        echo "<td>".$row['name']."</td>";
  echo "<td>".$row['local']."</td>";
    echo "<td>".$row['prefix']."</td>";
 $a = "SELECT COUNT(1) FROM ".$row['local']."smen";
  $sqleq=mysql_query($a);
$b = mysql_fetch_array( $sqleq );
  echo "<td>".$b[0]."</td>";
  echo "<form action='add.php?local=".$row['local']."' method='POST'>";
  echo "<td> <button type='submit' class='btn btn-default btn-sm'><span class='glyphicon glyphicon-wrench'></span> Добавить</button>";
  echo "</form>";
$butdel="<button type='button' class='btn btn-danger btn-sm' onclick='location.href="edit.php?local=".$row['local']."";'>редактировать</button>";
  echo $butdel;
  echo "</tr>";
  $pp++;
}
?>
    </tbody>
 </table>
 
Ниже отрисовывается таблица Резерв
 <table class="table table-hover" id="rezerv">   
      <thead>
        <tr>
            <th>№ п/п</th>
            <th>Название</th>
             <th>Код</th>
            <th>сортировка</th>
                      <th>Кол-во </th>
                      <th>Действия</th>
                    </tr>
    </thead>   
    <tbody>
    <?php
$pp = 1;
$resultprov = mysql_query("SELECT * from rezerv");
while ($row = mysql_fetch_array($resultprov, MYSQL_ASSOC)) {
echo "<tr>";
  echo "<td>".$pp."</td>";
        echo "<td>".$row['name']."</td>";
  echo "<td>".$row['local']."</td>";
    echo "<td>".$row['prefix']."</td>";
 $a = "SELECT COUNT(1) FROM ".$row['local']."smen";
  $sqleq=mysql_query($a);
$b = mysql_fetch_array( $sqleq );
  echo "<td>".$b[0]."</td>";
  echo "<form action='del.php?local=".$row['local']."' method='POST'>";
  echo "<td> <button type='submit' class='btn btn-default btn-sm'><span class='glyphicon glyphicon-wrench'></span> Убрать</button>";
  echo "</form>";
  echo "</tr>";
  $pp++;
}
?>
    </tbody>
 </table>

Как бы так сделать, чтобы при нажатии на добавить строка переносилась в таблицу резерв, и отрисовывалась без перезагрузки таблицы, понимаю что копать нужно в сторону ajax. Но у меня походу с этим очень плохо. Друзья подскажите какие библиотеки подключить и что дописать чтобы это все работало. Сроки давят ((

@Пифагор · 18.01.2017, 18:14

fidel42rus, если не планируется использовать jQuery, то никаких библиотек подключать не надо.

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

понимаю что копать нужно в сторону ajax

Верно понимаете.
https://learn.javascript.ru/ajax-xmlhttprequest

@fidel42rus · 18.01.2017, 19:19 **[ТС]**

Можете с примером обьяснить для моего случая, или хотя бы аналогичный. В вашей статье, я не нашел именно того что нужно мне

@Balanaar · 19.01.2017, 09:45

Ajax здесь не требуется. jQuery подключен для удобства. Можно и без неё.
http://codepen.io/anon/pen/EZZRxd

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
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<h2>Склад</h2>
<table id="sklad">
  <tr>
    <th>№ п/п</th>
    <th>Название</th>
    <th>Код</th>
    <th>сортировка</th>
    <th>Кол-во </th>
    <th>Действия</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Название1</td>
    <td>101</td>
    <td>-</td>
    <td>100</td>
    <td class="add">Добавить</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Название2</td>
    <td>102</td>
    <td>-</td>
    <td>200</td>
    <td class="add">Добавить</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Название3</td>
    <td>103</td>
    <td>-</td>
    <td>300</td>
    <td class="add">Добавить</td>
  </tr>
</table>
<h2>Резерв</h2>
<table id="rezerv">
  <tr>
    <th>№ п/п</th>
    <th>Название</th>
    <th>Код</th>
    <th>сортировка</th>
    <th>Кол-во </th>
    <th>Действия</th>
  </tr>
</table>

CSS
1
2
3
4
5
6
7
8
9
10
11
table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid black;
  text-align: center;
}
.add {
  cursor: pointer;
  text-decoration: underline;
}

JavaScript
1
2
3
$('.add').on('click', function() {
  $('#rezerv').append($(this).parent());
});

@fidel42rus · 20.01.2017, 07:29 **[ТС]**

спасибо, это именно то что нужно, а не подскажите как сделать обработчик на php для разнесения строки в базу по полям.

@Balanaar · 20.01.2017, 09:40

fidel42rus, опишите подробнее задачу. Вам нужно вносить изменения в базу после клика на кнопку "добавить"? Если да - то тут уже нужен ajax.

@fidel42rus · 23.01.2017, 02:27 **[ТС]**

да, после нажатия кнопки добавить, из таблицы в базе склад, перенести товар в таблицу резерв в базе. И на экране пользователя это отразить, как вы написали выше.

Добавлено через 12 часов 52 минуты
Подскажите пожалуйста, код переноса на php я написал, а вот в js и ajax я еще плаваю

@Balanaar · 23.01.2017, 09:24

Ничего сложного там нет.

JavaScript
1
2
3
4
5
6
7
8
9
10
$.ajax({
  type: "METHOD",
  url: "URL",
  success: function(response) {
    // Ответ от сервера в переменной response
  },
  error: function() {
    // Что делать в случае ошибки
  }
});

где METHOD - метод запроса (GET, POST, ...), URL - адрес вашего PHP-скрипта.
Пожалуйста, обратите внимание, что все AJAX-запросы по умолчанию асинхронны. Если вам ни о чём это не говорит - почитайте об асинхронности в интернете, чтобы не плодить очередную 100500ую тему, в которой ТС не понимает, почему запрос не отрабатывает.

Забыл уточнить. Функция сработает при подключенном jQuery.

@Padimanskas · 24.01.2017, 03:04

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

после нажатия кнопки добавить, из таблицы в базе склад, перенести товар в таблицу резерв в базе.

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

@fidel42rus · 24.01.2017, 05:55 **[ТС]**

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

Добавлено через 1 минуту
То есть это должно выглядеть так?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$('.add').on('click', function() {
  $('#rezerv').append($(this).parent());
$.ajax({
  type: "METHOD",
  url: "URL",
  success: function(response) {
    // Ответ от сервера в переменной response
  },
  error: function() {
    // Что делать в случае ошибки
  }
});
});

@Balanaar · 24.01.2017, 09:27

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

То есть это должно выглядеть так?

Плейсхолдеры METHOD и URL не забудьте на свои поменять.

@fidel42rus · 24.01.2017, 09:57 **[ТС]**

спасибо большое) вы меня очень выручили)

Добавлено через 4 минуты
А вот еще, наверное достал вас уже. Можно ли как-нибудь сделать, чтобы при нажатии на склад, переносилось в резерв, и если там нажимать на #add то ничего не происходило?

Добавлено через 7 минут
не работает( визуально переносит, а в бд нет

@Balanaar · 24.01.2017, 10:04

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('.add').on('click', function() {
  $.ajax({
    type: "METHOD",
    url: "URL",
    success: function(response) {
      // Ответ от сервера в переменной response
      $(this).off('click');
      $('#rezerv').append($(this).parent()); // Лучше перенести строку сюда, как гарантию того, что запись будет перенесена в другую таблицу только после успешного выполнения запроса
    },
    error: function() {
      // Что делать в случае ошибки
    }
  });
});

Добавлено через 1 минуту

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

визуально переносит, а в бд нет

Проверьте правильность указания метода запроса и URL запроса. Проверьте правильность PHP-скрипта.

@fidel42rus · 24.01.2017, 10:37 **[ТС]**

понял в чем дело, здесь со строкой в таблице работа через js происходит, а в базе то надо указать что переносить
ну к примеру:
вот заполняется таблица:
$row['t'] ||$row['v'] || $row['e'] || $row['r'] || кнопка добавить
$row['t'] ||$row['v'] || $row['e'] || $row['r'] || кнопка добавить
$row['t'] ||$row['v'] || $row['e'] || $row['r'] || кнопка добавить
$row['t'] ||$row['v'] || $row['e'] || $row['r'] || кнопка добавить
вот строка
как передать $row['t'] через ajax скрипту который разносит это по БД?

@Balanaar · 24.01.2017, 10:51

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

как передать ... через ajax скрипту который разносит это по БД?

С помощью суперглобального массива $_POST например.
Допустим вы хотите осуществить запрос методом POST на ваш скрипт с определёнными данными. Для этого делаем следующее:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('.add').on('click', function() {
  var row = $(this).parent();
  $.ajax({
    type: "POST",
    url: "/ajax.php", // url взят из головы для примера
    data: { // Данные, которые будут переданы в PHP-скрипт
        t: row.find('td:nth-child(2)').text(),
        v: row.find('td:nth-child(3)').text(),
        e: row.find('td:nth-child(4)').text(),
        r: row.find('td:nth-child(5)').text()
    },
    success: function(response) {
      // Ответ от сервера в переменной response
      $(this).off('click');
      $('#rezerv').append($(this).parent()); // Лучше перенести строку сюда, как гарантию того, что запись будет перенесена в другую таблицу только после успешного выполнения запроса
    },
    error: function() {
      // Что делать в случае ошибки
    }
  });
});

Теперь данные из 2-5 столбцов доступны в PHP-скрипте ajax.php в суперглобальном массиве $_POST ($_POST['t'], $_POST['v'], $_POST['e'] и $_POST['r'] соответственно)

@fidel42rus · 24.01.2017, 19:08 **[ТС]**

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

@fidel42rus · 31.01.2017, 08:39 **[ТС]**

А вот еще хотел спросить, перенос работает отлично. А как сделать когда товар попал в таблицу резерв, у него вместо td class=add был class=remove?

@Balanaar · 31.01.2017, 09:56

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$('.add').on('click', function() {
  var row = $(this).parent();
  $.ajax({
    type: "POST",
    url: "/ajax.php", // url взят из головы для примера
    data: { // Данные, которые будут переданы в PHP-скрипт
        t: row.find('td:nth-child(2)').text(),
        v: row.find('td:nth-child(3)').text(),
        e: row.find('td:nth-child(4)').text(),
        r: row.find('td:nth-child(5)').text()
    },
    success: function(response) {
      // Ответ от сервера в переменной response
      $(this).off('click');
      $(this).removeClass('add');
      $(this).addClass('remove');
      $('#rezerv').append($(this).parent()); // Лучше перенести строку сюда, как гарантию того, что запись будет перенесена в другую таблицу только после успешного выполнения запроса
    },
    error: function() {
      // Что делать в случае ошибки
    }
  });
});

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

Работа с таблицами

Решение

Решение

Решение

@fidel42rus 40 / 42 / 15 Регистрация: 24.10.2015 Сообщений: 598
	18.01.2017, 19:19 [ТС]
	Можете с примером обьяснить для моего случая, или хотя бы аналогичный. В вашей статье, я не нашел именно того что нужно мне 0

@fidel42rus 40 / 42 / 15 Регистрация: 24.10.2015 Сообщений: 598
	20.01.2017, 07:29 [ТС]
	спасибо, это именно то что нужно, а не подскажите как сделать обработчик на php для разнесения строки в базу по полям. 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	20.01.2017, 09:40
	fidel42rus, опишите подробнее задачу. Вам нужно вносить изменения в базу после клика на кнопку "добавить"? Если да - то тут уже нужен ajax. 1

@fidel42rus 40 / 42 / 15 Регистрация: 24.10.2015 Сообщений: 598
	23.01.2017, 02:27 [ТС]
	да, после нажатия кнопки добавить, из таблицы в базе склад, перенести товар в таблицу резерв в базе. И на экране пользователя это отразить, как вы написали выше. Добавлено через 12 часов 52 минуты Подскажите пожалуйста, код переноса на php я написал, а вот в js и ajax я еще плаваю 0

@fidel42rus 40 / 42 / 15 Регистрация: 24.10.2015 Сообщений: 598
	24.01.2017, 09:57 [ТС]
	спасибо большое) вы меня очень выручили) Добавлено через 4 минуты А вот еще, наверное достал вас уже. Можно ли как-нибудь сделать, чтобы при нажатии на склад, переносилось в резерв, и если там нажимать на #add то ничего не происходило? Добавлено через 7 минут не работает( визуально переносит, а в бд нет 0

@fidel42rus 40 / 42 / 15 Регистрация: 24.10.2015 Сообщений: 598
	24.01.2017, 10:37 [ТС]
	понял в чем дело, здесь со строкой в таблице работа через js происходит, а в базе то надо указать что переносить ну к примеру: вот заполняется таблица: $row['t'] \|\|$row['v'] \|\| $row['e'] \|\| $row['r'] \|\| кнопка добавить $row['t'] \|\|$row['v'] \|\| $row['e'] \|\| $row['r'] \|\| кнопка добавить $row['t'] \|\|$row['v'] \|\| $row['e'] \|\| $row['r'] \|\| кнопка добавить $row['t'] \|\|$row['v'] \|\| $row['e'] \|\| $row['r'] \|\| кнопка добавить вот строка как передать $row['t'] через ajax скрипту который разносит это по БД? 0

@fidel42rus 40 / 42 / 15 Регистрация: 24.10.2015 Сообщений: 598
	24.01.2017, 19:08 [ТС]
	Огромнейшее спасибо, очень подробно и до мелочей. Хорошо что знающие люди и готовые помочь не вывелись на форуме. И самое главное что теперь я понял как это делать! 0

@fidel42rus 40 / 42 / 15 Регистрация: 24.10.2015 Сообщений: 598
	31.01.2017, 08:39 [ТС]
	А вот еще хотел спросить, перенос работает отлично. А как сделать когда товар попал в таблицу резерв, у него вместо td class=add был class=remove? 0