Editing purchases in a shopping calculator

Let's now implement cell editing. By condition, only the first 3 cells can be edited.

These ones:

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

Obviously, the code for editing will be the same for each cell: by double-clicking, the input should appear instead of the cell text, and by pressing Enter in the input, its contents should become the new cell text.

I propose to make some function that will take a table cell as a parameter and bind the editing ability to it:

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

Then we can apply our function like this:

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

An attentive reader may notice that not all cells are the same: after all, when changing a cell with a price or a cell with amount, the purchase cost in the cost column should change, and the total sum should also be recalculated.

We will leave this nuance as the next subtask to be solved in the next lesson. And for a start, we’ll just make it possible to edit our three cells, without recalculation.

Implement the cell editing I described.