Editarea cumpărăturilor în calculatorul de produse

Să implementăm acum editarea celulelor. Conform condiției, pot fi editate doar primele 3 celule.

Iată-le:

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

Evident, codul pentru editare va fi identic pentru fiecare celulă: la dublu click, în loc de textul celulei, ar trebui să apară un câmp de introducere, iar la apăsarea tastei Enter în câmp conținutul acestuia ar trebui să devină noul text al celulei.

Propun să creăm o funcție care va primi ca parametru o celulă a tabelului și îi va atașa posibilitatea de editare:

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

Atunci putem aplica funcția noastră în felul următor:

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

Cititorul atent poate observa faptul că nu toate celulele sunt identice: la schimbarea celulei cu prețul sau a celulei cu cantitatea, ar trebui să se schimbe costul cumpărăturii în coloana cost, și de asemenea să se efectueze recalcularea sumei totale.

Vom lăsa această nuanță ca o sarcină secundară pentru rezolvare în lecția următoare. Pentru început pur și simplu vom face posibilitatea de editare a celor trei celule, fără recalculare.

Implementați editarea celulelor descrisă de mine.