Ostosten muokkaus tuotelaskurissa

Toteutetaan nyt solujen muokkaus. Ehdon mukaan vain ensimmäiset 3 solua voidaan muokata.

Tässä ne:

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

On ilmeistä, että koodi solujen muokkaamiseen on sama jokaiselle solulle: kaksoisnapsautuksella solun tekstin tilalla pitäisi ilmestyä input-kenttä, ja kun painetaan Enter input-kentässä, sen sisällöstä pitäisi tulla solun uusi teksti.

Ehdotan, että teemme jonkinlaisen funktion, joka ottaa parametrinaan taulukkosolun ja liittää siihen muokkausmahdollisuuden:

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

Sitten voimme soveltaa funktiotamme seuraavalla tavalla:

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

Tarkkasilmäinen lukija saattaa huomata, että kaikki solut eivät ole samoja: kun hintaa tai määrää sisältävää solua muutetaan, pitäisi oston hinta muuttua sarakkeessa cost, ja kokonaissumman pitäisi laskea uudelleen.

Jätämme tämän vivahteen seuraavaksi ratkaistavaksi seuraavassa oppitunnissa. Aluksi teemme vain mahdollisuuden muokata kolmea soluamme ilman uudelleenlaskentaa.

Toteuta kuvailtuni solujen muokkaus.