Редактирование TD по клику
важность: 5
Сделайте ячейки таблицы редактируемыми по клику.
- По клику – ячейка должна стать «редактируемой» (textarea появляется внутри), мы можем изменять HTML. Изменение размера ячейки должно быть отключено.
- Кнопки OK и ОТМЕНА появляются ниже ячейки и, соответственно, завершают/отменяют редактирование.
- Только одну ячейку можно редактировать за один раз. Пока
<td>в «режиме редактирования», клики по другим ячейкам игнорируются. - Таблица может иметь множество ячеек. Используйте делегирование событий.
Демо:
- По клику – заменить
innerHTMLячейки на<textarea>с теми же размерами и без рамки. Можно использовать JavaScript или CSS, чтобы установить правильный размер. - Присвоить
textarea.valueзначениеtd.innerHTML. - Установить фокус на текстовую область.
- Показать кнопки ОК/ОТМЕНА под ячейкой, обрабатывать клики по ним.