Pengeditan Pembelian dalam Kalkulator Produk

Sekarang mari kita laksanakan pengeditan sel. Mengikut syarat, hanya 3 sel pertama yang boleh diedit.

Berikut adalah sel-sel tersebut:

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

Jelas sekali bahawa kod untuk pengeditan akan sama untuk setiap sel: pada double-klik, sebagai ganti teks sel, input harus muncul, dan apabila menekan Enter dalam input, kandungannya harus menjadi teks baru sel.

Saya cadangkan untuk membuat fungsi tertentu yang akan menerima sel jadual sebagai parameter dan mengikat kemungkinan pengeditan kepadanya:

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

Kemudian kita boleh menggunakan fungsi kami seperti berikut:

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

Pembaca yang teliti mungkin akan perasan bahawa tidak semua sel adalah sama: kerana apabila mengubah sel dengan harga atau sel dengan kuantiti, kos pembelian dalam lajur cost harus berubah, dan pengiraan semula jumlah keseluruhan harus dilakukan.

Kami akan tinggalkan nuansa ini sebagai tugas sampingan seterusnya untuk diselesaikan dalam pelajaran seterusnya. Untuk permulaan, mari kita buat kemungkinan pengeditan tiga sel kami, tanpa pengiraan semula.

Laksanakan pengeditan sel seperti yang saya terangkan.