⊗jsPrPCPE 28 of 62 menu

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

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

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

Реализирайте описаното от мен редактиране на клетки.

Български
AfrikaansAzərbaycanবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Ние използваме бисквитки за работата на сайта, анализ и персонализация. Обработката на данни се извършва в съответствие с Политика за поверителност.
приемам всички настройки отхвърляне