Edição de compras na calculadora de produtos
Vamos agora implementar a edição de células.
Por condição, apenas as primeiras
3 células podem ser editadas.
Aqui estão elas:
createCell(tr, name.value, 'name');
createCell(tr, price.value, 'price');
createCell(tr, amount.value, 'amount');
Obviamente, o código para edição será
igual para cada célula: no duplo clique,
um input deve aparecer no lugar do texto da célula,
e ao pressionar Enter no input,
seu conteúdo deve se tornar o novo texto da célula.
Sugiro criar uma função que receba como parâmetro uma célula da tabela e vincule a ela a possibilidade de edição:
function allowEdit(td) {
td.addEventListener('dblclick', function() {
});
}
Então podemos aplicar nossa função da seguinte forma:
allowEdit(createCell(tr, name.value, 'name'));
allowEdit(createCell(tr, price.value, 'price'));
allowEdit(createCell(tr, amount.value, 'amount'));
O leitor atento pode notar que
não todas as células são iguais: pois ao alterar
a célula com o preço ou a célula com a quantidade,
o custo da compra na coluna cost deve mudar,
e o recálculo do total deve ser executado.
Deixaremos essa nuance como uma próxima subtarefa para ser resolvida na próxima lição. E para começar, simplesmente faremos a possibilidade de edição de nossas três células, sem recálculo.
Implemente a edição de células descrita por mim.
