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:

javascriptcreateCell(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:

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

Então podemos aplicar nossa função da seguinte forma:

javascriptallowEdit(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.