Edición de compras en la calculadora de productos

Ahora implementemos la edición de celdas. Según las condiciones, solo se pueden editar las primeras 3 celdas.

Aquí están:

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

Obviamente, el código para la edición será el mismo para cada celda: al hacer doble clic debe aparecer un input en lugar del texto de la celda, y al presionar Enter en el input su contenido debe convertirse en el nuevo texto de la celda.

Propongo hacer una función que tome como parámetro una celda de la tabla y le asigne la capacidad de edición:

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

Entonces podemos aplicar nuestra función de la siguiente manera:

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

El lector atento puede notar que no todas las celdas son iguales: porque al cambiar la celda con el precio o la celda con la cantidad debe cambiarse el coste de la compra en la columna cost, y también debe realizarse un recálculo de la suma total.

Dejaremos este matiz como la siguiente subtarea para resolver en la siguiente lección. Y para empezar simplemente hagamos la capacidad de editar nuestras tres celdas, sin recálculo.