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

Давайте теперь реализуем редактирование ячеек. По условию редактировать можно только первые `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`, а также выполнялся перерасчет общей суммы.

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

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

←→
↑
en ru