Редактиране на покупки в калкулатор за продукти

Нека сега реализираме редактирането на клетки. По условие редактиране е възможно само за първите 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, както и да се извърше преизчисление на общата сума.

Този нюанс ще оставим като следваща подзадача за решаване в следващия урок. А за начало просто ще направим възможност за редактиране на нашите три клетки, без преизчисление.