Redigering av inköp i produktkalkylatorn

Låt oss nu implementera redigering av celler. Enligt villkoret kan endast de första 3 cellerna redigeras.

Här är de:

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

Uppenbarligen kommer koden för redigering att vara densamma för varje cell: vid dubbelklick bör en input visas istället för celltexten, och vid tryckning på Enter i inputfältet bör dess innehåll bli den nya celltexten.

Jag föreslår att vi skapar en funktion som tar en tabellcell som parameter och binder redigeringsmöjligheten till den:

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

Då kan vi använda vår funktion på följande sätt:

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

Den uppmärksamma läsaren kan lägga märke till att inte alla celler är lika: för när cellen med priset eller cellen med kvantiteten ändras bör kostnaden för köpet i kolumnen cost ändras, och en omberäkning av totalsumman bör utföras.

Denna nyans kommer vi att lämna som en nästa deluppgift för lösning i nästa lektion. Till att börja med skapar vi helt enkelt möjligheten att redigera våra tre celler, utan omberäkning.