Redigering af indkøb i madvareregneren

Lad os nu implementere redigering af celler. Ifølge betingelserne kan kun de første 3 celler redigeres.

Her er dem:

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

Det er indlysende, at koden til redigering vil være den samme for hver celle: ved dobbeltklik skal der vises en input i stedet for celleteksten, og ved tryk på Enter i inputfeltet skal dens indhold blive celletens nye tekst.

Jeg foreslår at lave en funktion, som tager en tabelcelle som parameter og binder muligheden for redigering til den:

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

Så kan vi anvende vores funktion på følgende måde:

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

Den opmærksomme læser vil måske bemærke, at ikke alle celler er ens: når en celle med pris eller en celle med antal ændres, bør omkostningen ved købet i kolonnen cost ændres, og den samlede sum bør genberegnes.

Denne nuance vil vi efterlade som en næste delopgave til løsning i næste lektion. Til at starte med vil vi bare lave muligheden for at redigere vores tre celler, uden genberegning.

Implementer den celleredigering, jeg har beskrevet.