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

@justux · Регистрация: 27.08.2020

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

Здравствуйте ! Помогите юниору
Проблема такова
У меня есть таблица на странице html , которая связана с mysql
Строится она через php
Я хочу чтобы можно было по клику на ячейку , изменять данные
и естественно , чтобы эти данные сохранялись в mysql
Как это можно реализовать , подскажите или может есть уже готовый вариант того , что меня интересует
Подключение к базе данных

PHP
1
2
3
4
5
6
7
8
<?php
require_once("db.php");
if ($connection == false){
 echo "Error!";
 echo mysqli_connect_errno();
 exit();
}
?>

Дурацкий костыль , не берите в голову

PHP
1
2
3
4
<?php
$har = mysqli_query($connection, "SELECT * FROM $dbarticles"); 
$num_rows = mysqli_num_rows( $har );
?>

Таблица

PHP
1
2
3
4
5
6
7
8
9
10
<?php
$query = mysqli_query($connection, "SELECT * FROM $dbarticles");
 
  while($row = mysqli_fetch_array($query)){
    $id=$row['id'];
    $name=$row['name'];
    $second=$row['secondname'];
    echo "<tr> <td>$id</td> <td>$name</td> <td>$second</td> </tr>";
    }
?>

Костыль , чтобы добавлять новую строчку со следующим id

PHP
1
2
3
4
5
<?php
    if(isset($_POST['button'])){
    $but = mysqli_query($connection, "INSERT INTO $dbarticles (id) VALUES ($num_rows)");
    header("Location: http://**.***.***.**/tablet.html");
?>

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

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
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
let table = document.getElementById('table');
 
let editingTd;
 
table.onclick = function(event) {
 
  // 3 возможных цели
  let target = event.target.closest('.edit-cancel,.edit-ok,td');
 
  if (!table.contains(target)) return;
 
  if (target.className == 'edit-cancel') {
    finishTdEdit(editingTd.elem, false);
  } else if (target.className == 'edit-ok') {
    finishTdEdit(editingTd.elem, true);
  } else if (target.nodeName == 'TD') {
    if (editingTd) return; // уже редактируется
 
    makeTdEditable(target);
  }
 
};
 
function makeTdEditable(td) {
  editingTd = {
    elem: td,
    data: td.innerHTML
  };
 
  td.classList.add('edit-td'); // td в состоянии редактирования, CSS применятся к textarea внутри ячейки
 
  let textArea = document.createElement('textarea');
  textArea.style.width = td.clientWidth + 'px';
  textArea.style.height = td.clientHeight + 'px';
  textArea.className = 'edit-area';
 
  textArea.value = td.innerHTML;
  td.innerHTML = '';
  td.appendChild(textArea);
  textArea.focus();
 
  td.insertAdjacentHTML("beforeEnd",
    '<div class="edit-controls"><button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button></div>'
  );
}
 
function finishTdEdit(td, isOk) {
  if (isOk) {
    td.innerHTML = td.firstChild.value;
  } else {
    td.innerHTML = editingTd.data;
  }
  td.classList.remove('edit-td');
  editingTd = null;

@dontknow · 28.08.2020, 11:58

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

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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.edit{
 width: 100%;
 height: 25px;
}
.editMode{
 border: 1px solid black;
}
table, th, td {
 border: 1px solid black;
}
</style>
<script>
$(document).ready(function(){
 
 // Add Class
 $('.edit').click(function(){
  $(this).addClass('editMode');
 });
 
 // Save data
 $(".edit").focusout(function(){
  $(this).removeClass("editMode");
  var id = this.id;
  var split_id = id.split("_");
  var field_name = split_id[0];
  var edit_id = split_id[1];
  var value = $(this).text();
 
  $.ajax({
   url: 'handler.php',//файл с php скриптом, обновляющий данные в бд
   type: 'post',
   data: { field:field_name, value:value, id:edit_id },// отправляем имя поля, новое значение и id, чтобы определить, что конкретно и как надо обновить в таблице
   success:function(response){
    console.log('Save successfully');
   }
  });
 
 });
 
});
</script>
</head>
<body>
<div class='container'>
<!-- лень выводить таблицу из бд, задача тривиальная -->
 <table>
  <tr>
   <th>Id</th>
   <th>Username</th>
   <th>Name</th>
  </tr>
  <tr>
   <td>1</td>
<!-- задаем ячейкам идентификатор на основе id и названия полей в таблице, например тут id ячейки username_1, где поле - username, id - 1 и тд-->
   <td contentEditable='true' class='edit' id='username_1'>vasya_user</td>
   <td contentEditable='true' class='edit' id='name_1'>vasya</td>
  </tr>
    <tr>
   <td>2</td>
   <td contentEditable='true' class='edit' id='username_2'>petya_user</td>
   <td contentEditable='true' class='edit' id='name_2'>petya</td>
  </tr>
 </table>
</div>
</body>
</html>

В php скрипте получаем данные и делаем с ними что хотим. handler.php

PHP
1
2
3
4
5
6
7
8
9
<?php
$field= $_POST['field'];
$value = $_POST['value'];
$id = $_POST['id'];
//подключаемся к бд
$con = mysqli_connect('localhost', 'root', 'mypassword','mydatabase');
//делаем запрос на обновление строки
$query = "UPDATE `mytable` SET `".$field."`='".$value."' WHERE `id`=".$editid;
mysqli_query($con,$query);

@justux · 28.08.2020, 15:26 **[ТС]**

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

id`=".$editid

Спасибо! Заработало всё
Пришлось конечно поменять синтаксис , так как я работаю в Centos 7 через cmd ssh
И `` мне не годятся ибо он их не воспринимает , без них все пашит

Была не большая опечатка , я ее исправил там не id = .$editid а просто id = $id

Но у меня появилась не большая проблема , то есть
Если смотреть по вашему пример

Изменить в строке Имя Юзер - все получается
а если начать менять что-то в строке Имя - то ничего не меняется

Добавлено через 31 минуту
Ваш код работает только со столбцом user_name
но он не работает со столбцом name
Как это решить ?

@dontknow · 28.08.2020, 15:28

id ячеек совпадает с названием поля в таблице? Насколько понимаю, у тебя должно быть по такому принципу:

HTML5
1
2
3
<td contentEditable='true' class='edit' id='name_1'>vasya</td>
<td contentEditable='true' class='edit' id='secondname_1'>vasya</td>
...

То есть выводишь таблицу так

PHP
1
2
3
4
5
6
7
8
9
10
<table>
<!-- тут может быть шапка таблицы -->
<?php while($row = mysqli_fetch_array($query)): ?>
  <tr>
  <td><?=$row['id']?></td>
   <td contentEditable='true' class='edit' id='<?=$row['name']?>_<?=$row['id']?>'><?=$row['name']?></td>
   <td contentEditable='true' class='edit' id='<?=$row['secondname']?>_<?=$row['id']?>'><?=$row['secondname']?></td>
  </tr>
<?php endwhile; ?>
</table>

В идеале бы конечно увидеть код и структуру таблицы.

@justux · 28.08.2020, 15:40 **[ТС]**

Вот мой код
пхп файл хэндлер

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Подключение к бд  -->
<?php
require_once("db.php");
if ($connection == false){
 echo "Error!";
 echo mysqli_connect_errno();
 exit();
}
?>
 
<?php
$field= $_POST['field'];
$value = $_POST['value'];
$editid = $_POST['id'];
$query = "UPDATE $dbarticles SET ".$field."='".$value."' WHERE id=$editid";
mysqli_query($connection,$query);
?>

Вот код таблицы

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
<!-- Подключение к бд  -->
<?php
require_once("db.php");
if ($connection == false){
 echo "Error!";
 echo mysqli_connect_errno();
 exit();
}
?>
 
<?php
$har = mysqli_query($connection, "SELECT * FROM $dbarticles"); 
$num_rows = mysqli_num_rows( $har );
?>
 
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Таблица SQL</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
 // Add Class
 $('.edit').click(function(){
  $(this).addClass('editMode');
 });
 
 // Save data
 $(".edit").focusout(function(){
  $(this).removeClass("editMode");
  var id = this.id;
  var split_id = id.split("_");
  var field_name = split_id[0];
  var edit_id = split_id[1];
  var value = $(this).text();
 
  $.ajax({
   url: 'handler.php',//файл с php скриптом, обновляющий данные в бд
   type: 'post',
   data: { field:field_name, value:value, id:edit_id },// отправляем имя поля, новое значение и id, чтобы определить, что конкретно и как надо обновить в таблице
   success:function(response){
    console.log('Save successfully');
   }
  });
 
 });
 
});
</script>
</head>
<body>
<div class='container'>
<table>
<tr>
    <th>ID</th>
    <th>Имя</th>
    <th>Фамилия</th>
</tr>
<?php
$query = mysqli_query($connection, "SELECT * FROM $dbarticles");
 
  while($row = mysqli_fetch_array($query)){
    $id=$row['id'];
    $name=$row['name'];
    $second=$row['secondname'];
    echo "<tr> 
        <td>$id</td> 
        <td contentEditable='true' class='edit' id='name_$id'>$name</td> 
        <td contentEditable='true' class='edit' id='second_$id'>$second</td> 
        </tr>";
    }
?>
</table>
<table>
<tr>
    <th> 
    <form method=post>
    <input type=submit name=button value='Добавить'>
    <?php
    if(isset($_POST['button'])){
    $but = mysqli_query($connection, "INSERT INTO $dbarticles (id) VALUES ($num_rows)");
    header("Location: http://********/tablet.html");
    }?>
    </form>
    </th>
</tr>
</table
</div>
</body>
</html>

@justux · 28.08.2020, 15:49 **[ТС]**

Вот собственно скриншот таблицы
Получается , изменить строчку Имя получается , то что вводишь синхронизируется с БД и остается при обновлении страницы
А в строчку Фамилия ничего не сохраняется

@dontknow · 28.08.2020, 16:08

Поле в бд называется secondname, а в таблице было second

PHP
71
<td contentEditable='true' class='edit' id='secondname_$id'>$second</td>

@justux · 28.08.2020, 16:14 **[ТС]**

Всё исправил , спасибо большое!
Всё отлично работает , как часы :3

@sasha300 · 04.04.2021, 22:29

Здравствуйте!
На основе данных в топике наваял код, при внесении изменений и обновлении страницы изначальные данные отображаются вновь. Уже перепробовал различные варианты, отталкивался от лучшего ответа, от кода автора топика - в БД изменения не вносятся.
Решал задачу целую неделю - безрезультатно. Подскажите, пожалуйста, где накосячил?

link.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
<?php
$field= $_POST['field'];
$value = $_POST['value'];
$id = $_POST['id'];
 
//подключаемся к бд
$link=mysqli_connect('localhost','test','test','mydatabase') or die(mysqli_error($link));
 
//делаем запрос на обновление строки
$query = "UPDATE mytable SET ".$field."=".$value." WHERE id=".$id;
mysqli_query($link,$query);
?>

temp.php

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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.edit{
 width: 100%;
 height: 25px;
}
.editMode{
 border: 1px solid black;
}
table, th, td {
 border: 1px solid black;
}
</style>
<script>
$(document).ready(function(){
 
 // Add Class
 $('.edit').click(function(){
  $(this).addClass('editMode');
 });
 
 // Save data
 $(".edit").focusout(function(){
  $(this).removeClass("editMode");
  var id = this.id;
  var split_id = id.split("_");
  var field_name = split_id[0];
  var edit_id = split_id[1];
  var value = $(this).text();
 
  $.ajax({
   url: 'link.php',//файл с php скриптом, обновляющий данные в бд
   type: 'post',
   data: { field:field_name, value:value, id:edit_id },// отправляем имя поля, новое значение и id, чтобы определить, что конкретно и как надо обновить в таблице
   success:function(response){
    console.log('Save successfully');
   }
  });
 });
});
</script>
</head>
<body>
<div class='container'>
 <table>
  <tr>
   <th>Id</th>
   <th>field</th>
   <th>value</th>
  </tr>
<?php 
$link=mysqli_connect('localhost','test','test','mydatabase') or die(mysqli_error($link));
$query2 = mysqli_query($link, "SELECT * FROM mytable");
 
  while($row = mysqli_fetch_array($query2)){
    $id=$row['id'];
    $field=$row['field'];
    $value=$row['value'];
    echo "<tr> 
        <td>$id</td> 
        <td contentEditable='true' class='edit' id='field_$id'>$field</td> 
        <td contentEditable='true' class='edit' id='value_$id'>$value</td> 
        </tr>";
    }
?>
</table>
</div>
</body>
</html>

Если нужен бекап БД, то он тут:
sas.zip

@Para bellum · 05.04.2021, 08:11

sasha300, попробуйте заменить ".$value." на '".$value."' (добавлены одинарные кавычки).

Скрипт содержит уязвимость к SQL-инъекциям.

@sasha300 · 05.04.2021, 09:22

Para bellum, Заработало, спасибо!
В link.php было:

PHP
1
$query = "UPDATE mytable SET ".$field."=".$value." WHERE id=".$id;

стало:

PHP
1
$query = "UPDATE mytable SET ".$field."='".$value."' WHERE id=".$id;

И теперь в БД изменения вносятся.

Добавлено через 1 час 2 минуты
Para bellum

Пытаюсь понять, как без объявлений названий столбцов работает код.
В начале взял за основу команду внесения изменений в БД, пишу в SQL запросе Phpmyadmin:

MySQL
1
UPDATE mytable SET field='newfield', value='newvalue' WHERE id = 12

команда срабатывает, значения меняются, название столбца равно значению, все норм.

Тогда почему код

PHP
1
$query = "UPDATE mytable SET ".$field."='".$value."' WHERE id=".$id;

срабатывает, если он идет без объявления названий столбцов?

p.s.:
Должно ведь быть так:

PHP
1
$query = "UPDATE mytable SET field = ".$field.", value=".$value." WHERE id=".$id;

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

Что-то я не догоняю..

@Para bellum · 05.04.2021, 10:04

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

если он идет без объявления названий столбцов?

Как это без столбцов? Вы же из переменной $field подставляете название поля, а значение этого поля -- из "$value".

Повторяю, подобные подстановки уязвимы для SQL-инъекций.
Название столбца лучше подставлять, как написано тут: Белые списки в SQL
А значение пропускать через mysqli_real_escape_string. Еще лучше -- использовать prepared statements.

@atanov · 05.04.2021, 12:44

Сообщение от Para bellum

Еще лучше -- использовать

категорически необходимо

@Jewbacabra · 05.04.2021, 13:37

Сообщение от Para bellum

значение пропускать через mysqli_real_escape_string

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

PHP
1
$query = "UPDATE mytable SET field = ".$field.", value=".$value." WHERE id=".$id;

Не сильно поможет, если в $id будет, например, что-то такое 0 OR 1=1. При подстановки чисел следует явно их в int преобразовывать.
Но лучше конечно подготовленные выражения

@Para bellum · 05.04.2021, 14:11

Имел в виду упомянутое до процитированной вами фразы значение:

Сообщение от Para bellum

из переменной $field подставляете название поля, а значение этого поля -- из "$value"

Про id вообще забыл, когда ответ последний писал.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

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

Решение

Решение

@justux 0 / 0 / 0 Регистрация: 27.08.2020 Сообщений: 5
	28.08.2020, 15:49 [ТС]
	Вот собственно скриншот таблицы Получается , изменить строчку Имя получается , то что вводишь синхронизируется с БД и остается при обновлении страницы А в строчку Фамилия ничего не сохраняется Миниатюры 0

@justux 0 / 0 / 0 Регистрация: 27.08.2020 Сообщений: 5
	28.08.2020, 16:14 [ТС]
	Всё исправил , спасибо большое! Всё отлично работает , как часы :3 0

@Para bellum 5755 / 4134 / 1508 Регистрация: 06.01.2011 Сообщений: 11,276
	05.04.2021, 08:11
	sasha300, попробуйте заменить `".$value."` на `'".$value."'` (добавлены одинарные кавычки). Скрипт содержит уязвимость к SQL-инъекциям. 1