Edit Pembelian di Kalkulator Produk

Sekarang mari kita implementasikan edit sel. Berdasarkan ketentuan, hanya 3 sel pertama yang dapat diedit.

Berikut adalah sel-sel tersebut:

createCell(tr, name.value, 'name');
createCell(tr, price.value, 'price');
createCell(tr, amount.value, 'amount');

Jelas bahwa kode untuk mengedit akan sama untuk setiap sel: pada double click sebuah input harus muncul menggantikan teks sel, dan saat menekan Enter pada input isi inputnya harus menjadi teks baru dari sel tersebut.

Saya sarankan untuk membuat suatu fungsi yang akan menerima sel tabel sebagai parameter dan mengikatkan kemampuan edit padanya:

function allowEdit(td) {
	td.addEventListener('dblclick', function() {
		
	});
}

Maka kita dapat menerapkan fungsi kita sebagai berikut:

allowEdit(createCell(tr, name.value, 'name'));
allowEdit(createCell(tr, price.value, 'price'));
allowEdit(createCell(tr, amount.value, 'amount'));

Pembaca yang teliti mungkin menyadari bahwa tidak semua sel itu sama: karena ketika mengubah sel dengan harga atau sel dengan jumlah, biaya pembelian di kolom cost harus berubah, dan perhitungan ulang jumlah total harus dilakukan.

Kami akan meninggalkan nuansa ini sebagai subtugas berikutnya untuk diselesaikan dalam pelajaran berikutnya. Untuk saat ini, mari kita buat saja kemampuan untuk mengedit tiga sel kita, tanpa perhitungan ulang.

Implementasikan edit sel yang telah saya jelaskan.