Derse geri dön
Bu materyal sadece English, Español, Français, Indonesia, Italiano, 日本語, 한국어, Русский, Українська, 简体中文 dillerinde mevcuttur. Lütfen Türkçe diline çevirmek için bize yardım edin.

Edit TD on click

önem: 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:

Görevler için korunaklı alan aç.

  1. 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.
  2. Set textarea.value to td.innerHTML.
  3. Focus on the textarea.
  4. Show buttons OK/CANCEL under the cell, handle clicks on them.

Çözümü korunaklı alanda aç.