⊗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, а таксама выконвацца пераразлік агульнай сумы.

Гэты нюанс мы пакінем як наступную падзадачу для вырашэння ў наступным уроку. А для пачатку проста зробім магчымасць рэдагавання нашiх трох ячаек, без пераразліку.

Рэалізуйце апісанае мною рэдагаванне ячаек.

azbydeenesfrkakkptruuz