Редактирование ячеек таблицы HTML и обновление базы sqlite3?

Question

[tyfh50]

Подскажите, как сделать обновление базы данных sqlite3 при изменении клетки таблицы HTML?

У меня есть скрипт изменения HTML таблицы

const send = (e) => {
          if ((e.type === 'blur' && e.target.contentEditable === 'true') || e.which === 13) {
            e.preventDefault();
            e.target.contentEditable = false;

            const xhr = new XMLHttpRequest();
            xhr.open("POST", '/', false);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(`text=${encodeURIComponent(e.target.textContent)}`);
          }
        };

        [...document.querySelectorAll('td')].forEach(el => {
          el.addEventListener('click', e => {
            e.target.contentEditable = true;
            e.target.focus();
          });

          el.addEventListener('keypress', send);
          el.addEventListener('blur', send);
        });

Но после обновления страницы вся таблица обновляется. Таблица получает данные из базы sqlite3. Как можно обновить эти данные в базе?

Answer 1

[Александр Нестеров]

Процесс сохранения в базу имеет 2 взаимосвязанных части:

• клиентская, которая обрабатывает ввод данных пользователем, сериализирует введенные данные данные (по факту - приводит к одному из стандартов, например json), после чего отправляет данные на сервер.
  
• Серверная часть получает данные, если нужно как-то их обрабатывает, после чего сохраняет в базу.
  

Судя по коду (с js`ом я, увы, на вы) при вводе символа в ячейку, ее содержимое отправляется post-запросом по определенному адресу.
Как этот запрос обрабатывается на сервере - непонятно, т.к. код вы не привели. В общем случае, это должно происходить так:

1. Валидируются данные
   
2. Происходит подключение к базе
   
3. Данные подставляются в запрос (подготовленные запросы, PDO (актуально для php, указанного в тегах) или orm)
   
4. Запрос выполняется
   
5. При необходимости отдается ответ клиенту
   

P.S. К тому же, непонятно как вы определяете, какие данные нужно изменить. Чтобы изменить запись в базе нужно указать какую именно запись вы собираетесь изменить (например с помощью id или какого-то другого уникального поля). При этом, поскольку вы отправляете только одну ячейку, сделать это невозможно, поскольку поле может содержать неуникальные значения по типу цены (абстрактный пример), которая может быть одинаковой для разных товаров.

Comments

[tyfh50]

Благодарю за ответ.
Отправку запроса POST оставил пустой т.к. не имею понятие, как правильно обрабатывать данные, подключаться к базе sqlite и обновлять данные на PHP. Всё это искал, но видимо, либо неправильно, либо плохо искал. Поэтому решил обратиться сюда, чтобы узнать ответ на вышеупомянутые вопросы.

[Александр Нестеров]

tyfh50,

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

Ну тут, вопрос скорее к структурированному подходу к изучению, из-за незнания откуда начинать, вы начинаете учить что попало.
В этом деле хорошо помогают дорожные карты:
https://tproger.ru/translations/full-stack-develop...
https://javascript.plainenglish.io/the-complete-fu...
И учебники. Ссылок приводить не буду, ибо количество тем довольно велико и по каждой будет свой учебник.
Конкретно по теме вопроса. По запросу "table to json" найдется куча вариантов. Другое дело, чтобы найденный код работал нормально, нужно четко понимать задачу и как адаптировать кож под себя с учетом тонкостей (например идентификация записей, о которой я писал)

Всё это искал, но видимо, либо неправильно, либо плохо искал.

Ну, перво-наперво - не знаете где искать ищите в доках. Это должно быть на уровне "рефлексов".

Answer 2

[Антон Шаманов]

зависит от структуры данных и того каким образом обновляются данные ячеек таблицы.
предположим каждая строка и колонка в HTML таблице соответствует запись в таблице и колонке БД, значения отображаются в <input>, тогда тебе нужно повесить обработчик на input'ы: он определяет primary key измененной строки и передает новое значение input'а на сервер вместе с идентификатором записи