Pirkumu rediģēšana produktu kalkulatorā

Tagad īstenosim šūnu rediģēšanu. Saskaņā ar nosacījumu rediģēt var tikai pirmās 3 šūnas.

Lūk, tās:

javascriptcreateCell(tr, name.value, 'name');
createCell(tr, price.value, 'price');
createCell(tr, amount.value, 'amount');

Acīmredzami, ka kods rediģēšanai būs vienāds katrai šūnai: dubultklikšķī šūnas teksta vietā jāparādās input lauks, bet nospiežot Enter input laukā tā saturam jākļūst par jauno šūnas tekstu.

Es ierosinu izveidot noteiktu funkciju, kas parametrā saņems tabulas šūnu un piesaistīs tai rediģēšanas iespēju:

javascriptfunction allowEdit(td) {
  td.addEventListener('dblclick', function() {
    
  });
}

Tad mēs varam izmantot mūsu funkciju šādi:

javascriptallowEdit(createCell(tr, name.value, 'name'));
allowEdit(createCell(tr, price.value, 'price'));
allowEdit(createCell(tr, amount.value, 'amount'));

Vērīgs lasītājs varēs pamanīt to, ka ne visas šūnas ir vienādas: jo, mainot šūnu ar cenu vai šūnu ar daudzumu, ir jāmainās pirkuma izmaksām ailē cost, kā arī jāveic pārrēķins kopējai summai.

Šo niansi mēs atstāsim kā nākamo apakšuzdevumu risināšanai nākamajā nodarbībā. Un sākumā vienkārši izveidosim iespēju rediģēt mūsu trīs šūnas, bez pārrēķina.