Pirkinių redagavimas maisto produktų skaičiuoklėje

Dabar įgyvendinkime langelių redagavimą. Pagal sąlygą redaguoti galima tik pirmuosius 3 langelius.

Štai juos:

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

Akivaizdu, kad redagavimo kodas bus vienodas kiekvienam langeliui: dukart paspaudus vietoj langelio teksto turėtų pasirodyti įvesties laukas, o paspaudus Enter įvesties lauke jo turinys turėtų tapti naujuoju langelio tekstu.

Siūlau sukurti tam tikrą funkciją, kuri parametru priims lentelės langelį ir priskirs jam redagavimo galimybę:

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

Tada mes galime pritaikyti mūsų funkciją taip:

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

Dėmesingas skaitytojas gali pastebėti tai, kad ne visi langeliai yra vienodi: juk pakeitus langelį su kaina arba langelį su kiekiu turėtų keistis pirkimo kaina stulpelyje cost, taip pat turėtų būti perskaičiuota bendra suma.

Šį niuansą paliksime kaip kitą užduotį sprendimui kitoje pamokoje. O pradžiai tiesiog sukurkime galimybę redaguoti mūsų tris langelius, be perskaičiavimo.

Įgyvendinkite manimi aprašytą langelių redagavimą.