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

Давайте теперь реализуем редактирование ячеек. По условию редактировать можно только первые 3 ячейки.

Вот их:

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

Очевидно, что код для редактирования будет одинаковым для каждой ячейки: по двойному клику вместо текста ячейки должен появится инпут, а по нажатию Enter в инпуте его содержимое должно стать новым текстом ячейки.

Я предлагаю сделать некоторую функцию, которая параметром будет принимать ячейку таблицы и привязывать к ней возможность редактирования:

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

Тогда мы можем применить нашу функцию следующим образом:

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

Внимательный читатель может заметить то, что не все ячейки одинаковы: ведь при изменении ячейки с ценой или ячейки с количеством должна изменяться стоимость покупки в колонке cost, а также выполнялся перерасчет общей суммы.

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

Реализуйте описанное мною редактирование ячеек.