Редактирование ячеек таблицы HTML: двойной клик и сохранение

Быстрый ответ

Делаем ячейку <td> редактируемой с помощью атрибута contentEditable:

<td contentEditable="true">Текст для редактирования</td>

Совет: Задайте значение contentEditable равным "true", чтобы сделать ячейку редактируемой. Это можно сравнить с переводом переключателя в режим чтения-записи в контексте HTML. О тонкостях этого механизма поговорим подробнее ниже. 😉

Активирование редактирования двойным кликом

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

document.querySelectorAll('td').forEach(td => {
  td.ondblclick = function() {
    this.contentEditable = true; // "Ура, мы перешли в режим редактирования!" 🏉
  };
});

Обработка событий и сохранение изменений

Важно: Изменения не сохраняются автоматически. Следует отслеживать возникновение события blur, которое сигнализирует о том, что ячейка потеряла фокус (то есть, редактирование было завершено):

td.onblur = function() {
  this.contentEditable = false; // "Время для AJAX, чтобы передать данные на сервер!" 🚛
};

Защита данных с помощью валидации

Гарантируйте целостность данных в вашем приложении путем проверки корректности ввода:

td.onblur = function() {
  if (isValid(this.innerText)) { 
    this.contentEditable = false; // Если всё верно, можно сохранять 👍
  } else {
    alert('Некорректный ввод!'); // Ошибка! 🚩
    this.focus(); // Возвращаем пользователя к редактированию
  }
};

Функцию isValid следует определить согласно правилам валидации данных в вашем приложении.

Дополнение интерфейса динамическим вводом

Добавьте динамики в интерфейс, заменив статический текст на поле ввода <input>:

td.ondblclick = function() {
  let input = document.createElement('input');
  input.value = this.innerText; // "Приветствуем новое блестящее поле ввода!" ✨
  this.innerHTML = '';
  this.appendChild(input);
  input.focus();
};

После завершения редактирования убедитесь, что поле <input> корректно размещается в ячейке и удаляется:

input.onblur = function() {
  td.innerHTML = this.value; // Передача данных выполнена, поле ввода отправлено в прошлое!
};

Визуализация

Трансформируйте ячейку от статичного отображения к интерактивной форме:

Редактирование активируется изменением атрибута contenteditable в ячейках:

<td>📄</td> <!-- Режим просмотра -->
<td contenteditable="true">📝✍️</td> <!-- А вот и режим редактирования! -->

Молодцы, вы освоили интерактивное взаимодействие с таблицами. 😎

Клавиатура — инструмент профи

Используйте клавиатурные сочетания для более удобного редактирования:

input.onkeydown = function(e) {
  if (e.key === 'Enter') { // "Завершение редактирования." 🎯
    // Сохраняем изменения и выходим из режима редактирования
  } else if (e.key === 'Escape') { // "Не так! Всё назад!" 🆘
    // Отменяем все изменения и возвращаемся назад
    
  }
};

Безопасность передачи данных

Безопасность передачи данных — важный элемент, влияющий не только на следование лучшим практикам, но и на бизнес-логику:

• Аутентификация с использованием токенов CSRF или API-ключей.
• Обеспечение конфиденциальности данных с помощью HTTPS.
• Реализация санитизации и валидации на стороне сервера для предотвращения XSS-атак.

Проверка совместимости браузеров

contenteditable — функция HTML5. Проверьте, поддерживают ли браузеры ваших пользователей этот функционал.

Минимизация ненужных запросов к серверу

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

Простота — залог успеха

Следует помнить: простота лучше, чем сложность.

• Работать легче с чистым JavaScript, без использования тяжёлых библиотек.
• Визуальные индикаторы режима редактирования реализованы на CSS.
• Автоматическое выделение текста при переходе в режим редактирования.

Полезные материалы

1. contenteditable – HTML: HyperText Markup Language | MDN — Руководство MDN по работе с атрибутом contenteditable.
2. HTML Global contenteditable Attribute — Обучающий материал по contenteditable на W3Schools.
3. X-editable :: In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery — Библиотека X-editable для создания продвинутых редактируемых таблиц.
4. Top 10 CSS Table Designs — Smashing Magazine — Топ-10 дизайнов таблиц для ваших будущих проектов.
5. javascript – Set cursor position on contentEditable <div> – Stack Overflow — Мастер-класс по управлению положением курсора в редактируемых элементах на Stack Overflow.