Redigering av kjøp i kalkulator for matvarer

La oss nå implementere redigering av celler. Ifølge betingelsen kan kun de første 3 cellene redigeres.

Her er de:

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

Det er åpenbart at koden for redigering vil være den samme for hver celle: ved dobbeltklikk skal en input vises i stedet for cellens tekst, og ved å trykke Enter i input skal innholdet bli den nye teksten i cellen.

Jeg foreslår å lage en funksjon som tar en tabellcelle som parameter og knytter muligheten for redigering til den:

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

Da kan vi bruke funksjonen vår som følger:

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

En oppmerksom leser kan legge merke til at ikke alle celler er like: for ved endring av celle med pris eller celle med antall skal kostnaden for kjøpet i kolonnen cost endres, og en omberegning av totalsummen skal utføres.

Denne nyansen lar vi være som en neste underoppgave å løse i neste leksjon. Til å begynne med skal vi bare lage muligheten for redigering av våre tre celler, uten omberegning.