Modifica degli acquisti nel calcolatore di prodotti

Implementiamo ora la modifica delle celle. Secondo le condizioni, è possibile modificare solo le prime 3 celle.

Eccole:

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

È ovvio che il codice per la modifica sarà identico per ogni cella: al doppio click al posto del testo della cella dovrebbe apparire un input, e alla pressione di Enter nell'input il suo contenuto dovrebbe diventare il nuovo testo della cella.

Propongo di creare una funzione che prenda come parametro una cella della tabella e le associ la possibilità di modifica:

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

Quindi possiamo applicare la nostra funzione nel modo seguente:

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

Un lettore attento potrebbe notare che non tutte le celle sono uguali: infatti, quando si modifica la cella con il prezzo o la cella con la quantità, dovrebbe cambiare il costo dell'acquisto nella colonna cost, e dovrebbe essere ricalcolato l'importo totale.

Lasceremo questa sfumatura come prossimo compito da risolvere nella lezione successiva. Per iniziare, implementiamo semplicemente la possibilità di modificare le nostre tre celle, senza ricalcolo.

Implementate la modifica delle celle come da me descritto.