Уређивање куповине у калкулатору намирница
Хајде сада да имплементирамо уређивање ћелија.
По условима, могуће је уређивати само првих
3 ћелије.
Ево њих:
createCell(tr, name.value, 'name');
createCell(tr, price.value, 'price');
createCell(tr, amount.value, 'amount');
Очигледно је да ће код за уређивање бити
исти за сваку ћелију: при дуплом клику
уместо текста ћелије треба да се појави
уносно поље, а при притиску на Enter у уносном пољу
његов садржај треба да постане нови текст ћелије.
Предлажем да направимо одређену функцију која ће као параметар примати ћелију табеле и везивати за њу могућност уређивања:
function allowEdit(td) {
td.addEventListener('dblclick', function() {
});
}
Тада можемо применити нашу функцију на следећи начин:
allowEdit(createCell(tr, name.value, 'name'));
allowEdit(createCell(tr, price.value, 'price'));
allowEdit(createCell(tr, amount.value, 'amount'));
Пажљив читалац може приметити то
да нису све ћелије исте: јер при промени
ћелије са ценом или ћелије са количином треба да се
промени цена куповине у колони cost,
а такође да се изврши прерачун укупног износа.
Овај детаљ ћемо оставити као следећи подзадатак за решавање у наредној лекцији. А за почетак само направимо могућност уређивања наших три ћелије, без прерачунавања.
Имплементирајте описано уређивање ћелија.