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ç.