Edit TD on click

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:

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