Modifica degli acquisti nel calcolatore di prodotti

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

Eccole:

javascriptcreateCell(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:

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

Quindi possiamo applicare la nostra funzione nel modo seguente:

javascriptallowEdit(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.