Editovanie nákupov v kalkulačke produktov

Poďme teraz implementovať editovanie buniek. Podľa podmienky je možné editovať iba prvé 3 bunky.

Tu sú:

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

Je zrejmé, že kód pre editovanie bude rovnaký pre každú bunku: po dvojitom kliknutí by sa namiesto textu bunky mal objaviť input a po stlačení Enter v inpute by sa jeho obsah mal stať novým textom bunky.

Navrhujem vytvoriť určitú funkciu, ktorá ako parameter bude prijímať bunku tabuľky a pripájať k nej možnosť editovania:

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

Potom môžeme našu funkciu aplikovať nasledovne:

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

Pozorný čitateľ môže postrehnúť, že nie všetky bunky sú rovnaké: pretože pri zmene bunky s cenou alebo bunky s množstvom by sa mala meniť cena nákupu v stĺpci cost, a tiež by sa mal prepočítať celkový súčet.

Túto nuansu necháme ako ďalšiu podúlohu na vyriešenie v nasledujúcej lekcii. A na začiatok jednoducho urobíme možnosť editovania našich troch buniek, bez prepočtu.