kembali ke pelajaran

Edit TD on click

pentingnya: 5

Buat sel tabel yang dapat diedit saat diklik.

  • Saat diklik ??? sel akan menjadi ???editable??? (textarea muncul dalam), kita bisa mengubah HTML. Tidak boleh mengubah ukurannya, semua geometri harus tetap sama???
  • Tombol OK and CANCEL muncul di bawah sel untuk menyelesaikan atau membatalkan proses perubahan.
  • Hanya satu sel yang dapat diedit setiap saatya. Sementara <td> dalam ???edit mode???, klik pada sel lain akan diabaikan.
  • Tabel mungkin memilki banyak sel. Gunakan event delegation.

Demo:

Buka sandbox untuk tugas tersebut.

  1. Saat diklik ??? ganti innerHTML dari sel <textarea> dengan ukuran yang sama dan tanpa border. Bisa menggunakan JavaScript atau CSS untuk mengatur ukuran yang sesuai.
  2. Ubah textarea.value ke td.innerHTML.
  3. Fokus pada textarea.
  4. Tampilkan tombol OK/CANCEL dibawah sel, tangani klik pada mereka.

Buka solusi di kotak pasir.