⊗jsPrPCPA 25 of 62 menu

Ajout d'un nouvel achat dans le calculateur de produits

Pour commencer, faisons en sorte qu'en cliquant sur le bouton, une nouvelle ligne avec un achat soit ajoutée au tableau :

add.addEventListener('click', function() { let tr = document.createElement('tr'); let td; td = document.createElement('td'); td.textContent = name.value; td.classList.add('name'); tr.appendChild(td); td = document.createElement('td'); td.textContent = price.value; td.classList.add('price'); tr.appendChild(td); td = document.createElement('td'); td.textContent = amount.value; td.classList.add('amount'); tr.appendChild(td); td = document.createElement('td'); td.textContent = price.value * amount.value; td.classList.add('cost'); tr.appendChild(td); td = document.createElement('td'); td.textContent = 'supprimer'; td.classList.add('remove'); tr.appendChild(td); table.appendChild(tr); });

Cependant, la solution que j'ai présentée a des problèmes évidents de duplication de code : en fait, pour chaque cellule, nous écrivons le même code.

Il serait pertinent d'avoir une fonction pour créer une cellule de tableau. Que cette fonction prenne comme premier paramètre une référence à la ligne du tableau, comme deuxième paramètre - le texte de la cellule du tableau, et comme troisième - le nom de la classe CSS de la cellule :

function createCell(tr, value, name) { }

Ayant une telle fonction, nous pourrions réécrire le code ci-dessus de la manière suivante :

add.addEventListener('click', function() { let tr = document.createElement('tr'); createCell(tr, name.value, 'name'); createCell(tr, price.value, 'price'); createCell(tr, amount.value, 'amount'); createCell(tr, price.value * amount.value, 'cost'); createCell(tr, 'supprimer', 'remove'); table.appendChild(tr); });

Implémentez la fonction createCell que j'ai décrite.

Copiez mon code pour ajouter un nouvel achat. Testez l'ajout d'un nouvel achat dans le tableau.

Modifiez la fonction createCell de manière à ce qu'elle renvoie via return la cellule de tableau créée.

bydeenesfrptru