Urejanje nakupov v kalkulatorju produktov
Zdaj pa implementirajmo urejanje celic.
Pogoj je, da lahko urejamo le prvih
3 celice.
Tukaj so:
createCell(tr, name.value, 'name');
createCell(tr, price.value, 'price');
createCell(tr, amount.value, 'amount');
Očitno je, da bo koda za urejanje
enaka za vsako celico: ob dvojnem
kliku namesto besedila celice naj se pojavi
vnosno polje, ob pritisku na Enter v vnosnem polju
pa naj njegova vsebina postane novo besedilo celice.
Predlagam, da naredimo neko funkcijo, ki bo kot parameter sprejela celico tabele in ji privezala možnost urejanja:
function allowEdit(td) {
td.addEventListener('dblclick', function() {
});
}
Takrat lahko uporabimo našo funkcijo na naslednji način:
allowEdit(createCell(tr, name.value, 'name'));
allowEdit(createCell(tr, price.value, 'price'));
allowEdit(createCell(tr, amount.value, 'amount'));
Pozorni bralec lahko opazi,
da niso vse celice enake: kajti pri spreminjanju
celice s ceno ali celice s količino naj bi se
spremenil strošek nakupa v stolpcu cost,
in prav tako naj bi se izvedel ponovni izračun skupnega zneska.
To nianso bomo pustili kot naslednjo podnalogo za reševanje v naslednji lekciji. Za začetek pa preprosto omogočimo urejanje naših treh celic, brez ponovnega izračuna.
Implementirajte opisano urejanje celic.