Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на другие языки.
КупитьEPUB/PDF
Карта учебника
вернуться к уроку

Редактирование TD по клику

важность: 5

Сделайте ячейки таблицы редактируемыми по клику.

  • По клику – ячейка должна стать «редактируемой» (textarea появляется внутри), мы можем изменять HTML. Изменение размера ячейки должно быть отключено.
  • Кнопки OK и ОТМЕНА появляются ниже ячейки и, соответственно, завершают/отменяют редактирование.
  • Только одну ячейку можно редактировать за один раз. Пока <td> в «режиме редактирования», клики по другим ячейкам игнорируются.
  • Таблица может иметь множество ячеек. Используйте делегирование событий.

Демо:

Открыть песочницу для задачи.

  1. По клику – заменить innerHTML ячейки на <textarea> с теми же размерами и без рамки. Можно использовать JavaScript или CSS, чтобы установить правильный размер.
  2. Присвоить textarea.value значение td.innerHTML.
  3. Установить фокус на текстовую область.
  4. Показать кнопки ОК/ОТМЕНА под ячейкой, обрабатывать клики по ним.

Открыть решение в песочнице.