вопросы пишите мне в телеграмм +375298176892
можно скачать офлайн версию сайта: code.mu old.code.mu

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

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

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

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