Уређивање куповине у калкулатору намирница

Хајде сада да имплементирамо уређивање ћелија. По условима, могуће је уређивати само првих 3 ћелије.

Ево њих:

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

Очигледно је да ће код за уређивање бити исти за сваку ћелију: при дуплом клику уместо текста ћелије треба да се појави уносно поље, а при притиску на Enter у уносном пољу његов садржај треба да постане нови текст ћелије.

Предлажем да направимо одређену функцију која ће као параметар примати ћелију табеле и везивати за њу могућност уређивања:

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

Тада можемо применити нашу функцију на следећи начин:

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

Пажљив читалац може приметити то да нису све ћелије исте: јер при промени ћелије са ценом или ћелије са количином треба да се промени цена куповине у колони cost, а такође да се изврши прерачун укупног износа.

Овај детаљ ћемо оставити као следећи подзадатак за решавање у наредној лекцији. А за почетак само направимо могућност уређивања наших три ћелије, без прерачунавања.