Bewerken van aankopen in de voedselcalculator

Laten we nu het bewerken van cellen implementeren. Volgens de voorwaarden kunnen alleen de eerste 3 cellen worden bewerkt.

Hier zijn ze:

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

Het is duidelijk dat de code voor bewerken hetzelfde zal zijn voor elke cel: bij dubbelklikken moet er een invoerveld verschijnen in plaats van de celtekst, en bij het indrukken van Enter in het invoerveld moet de inhoud ervan de nieuwe celtekst worden.

Ik stel voor om een functie te maken die een tabelcel als parameter accepteert en er de mogelijkheid tot bewerken aan bindt:

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

Dan kunnen we onze functie als volgt toepassen:

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

Een oplettende lezer kan opmerken dat niet alle cellen hetzelfde zijn: bij het wijzigen van de cel met prijs of de cel met hoeveelheid moet de aankoopprijs in de kolom cost veranderen, en ook moet de totale som opnieuw worden berekend.

Deze nuance laten we als een volgende subtaak om op te lossen in de volgende les. En om te beginnen maken we gewoon de mogelijkheid om onze drie cellen te bewerken, zonder herberekening.