Edit TD on click
الأهمية: 5
Make table cells editable on click.
- On click – the cell should became “editable” (textarea appears inside), we can change HTML. There should be no resize, all geometry should remain the same.
- Buttons OK and CANCEL appear below the cell to finish/cancel the editing.
- Only one cell may be editable at a moment. While a
<td>
is in “edit mode”, clicks on other cells are ignored. - The table may have many cells. Use event delegation.
The demo:
- On click – replace
innerHTML
of the cell by<textarea>
with same sizes and no border. Can use JavaScript or CSS to set the right size. - Set
textarea.value
totd.innerHTML
. - Focus on the textarea.
- Show buttons OK/CANCEL under the cell, handle clicks on them.