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.