Editace nákupů v kalkulačce produktů

Pojďme nyní implementovat editaci buněk. Podle podmínek lze editovat pouze první 3 buňky.

Zde jsou:

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

Je zřejmé, že kód pro editaci bude stejný pro každou buňku: po dvojitém kliknutí by se místo textu buňky mělo objevit vstupní pole a po stisknutí Enter ve vstupním poli by se jeho obsah měl stát novým textem buňky.

Navrhuji vytvořit určitou funkci, která bude přijímat jako parametr buňku tabulky a přidávat k ní možnost editace:

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

Pak můžeme naši funkci aplikovat následujícím způsobem:

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

Pozorný čtenář si může všimnout, že ne všechny buňky jsou stejné: při změně buňky s cenou nebo buňky s množstvím by se měla měnit cena nákupu ve sloupci cost, a také by měl být přepočítán celkový součet.

Tento nuance necháme jako další dílčí úkol pro řešení v příští lekci. Pro začátek prostě uděláme možnost editace našich tří buněk, bez přepočtu.