Вернуться к уроку

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

важность: 5

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

  • При клике – ячейка <td> превращается в редактируемую, можно менять HTML. Размеры ячеек при этом не должны меняться.
  • В один момент может редактироваться одна ячейка.
  • При редактировании под ячейкой появляются кнопки для приема и отмена редактирования, только клик на них заканчивает редактирование.

Демо:

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

  1. При клике – заменяем innerHTML ячейки на <textarea> с размерами «под ячейку», без рамки.
  2. В textarea.value присваиваем содержимое ячейки.
  3. Фокусируем посетителя на ячейке вызовом focus().
  4. Показываем кнопки OK/CANCEL под ячейкой.

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