Modification des achats dans le calculateur de produits

Implémentons maintenant la modification des cellules. Selon les conditions, seules les premières 3 cellules peuvent être modifiées.

Les voici :

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

De toute évidence, le code pour la modification sera identique pour chaque cellule : lors d'un double-clic, une input doit apparaître à la place du texte de la cellule, et en appuyant sur Entrée dans l'input, son contenu doit devenir le nouveau texte de la cellule.

Je propose de créer une fonction qui prendra comme paramètre une cellule du tableau et lui attachera la possibilité de modification :

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

Ensuite, nous pouvons appliquer notre fonction de la manière suivante :

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

Un lecteur attentif peut remarquer que toutes les cellules ne sont pas identiques : en effet, lors de la modification de la cellule avec le prix ou de la cellule avec la quantité, le coût de l'achat dans la colonne cost doit changer, et un recalcul du montant total doit être effectué.

Nous laisserons cette nuance comme une sous-tâche supplémentaire à résoudre dans la prochaine leçon. Pour commencer, contentons-nous de mettre en place la possibilité de modification de nos trois cellules, sans recalcul.

Implémentez la modification des cellules que j'ai décrite.