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