Edycja zakupów w kalkulatorze produktów

Zaimplementujmy teraz edycję komórek. Zgodnie z warunkiem edytować można tylko pierwsze 3 komórki.

Oto one:

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

Oczywiste jest, że kod do edycji będzie identyczny dla każdej komórki: po podwójnym kliknięciu zamiast tekstu komórki powinno pojawić się pole input, a po naciśnięciu Enter w polu input jego zawartość powinna stać się nowym tekstem komórki.

Proponuję utworzyć pewną funkcję, która parametrem będzie przyjmować komórkę tabeli i przypisywać do niej możliwość edycji:

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

Wtedy możemy zastosować naszą funkcję w następujący sposób:

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

Uważny czytelnik może zauważyć, że nie wszystkie komórki są takie same: przy zmianie komórki z ceną lub komórki z ilością powinna zmieniać się wartość zakupu w kolumnie cost, a także powinno być wykonywane przeliczenie całkowitej sumy.

Tę kwestię pozostawimy jako kolejne podzadanie do rozwiązania w następnej lekcji. Na początek po prostu zróbmy możliwość edycji naszych trzech komórek, bez przeliczania.