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