Extraire les données de plusieurs zones de saisie à l'aide de la boucle foreach de Jquery

Question

Je crée une commande pour un projet. J'utilise une boucle Foreach pour extraire les données de la base de données dans une table que j'ai créée. Cependant, lorsque je multiplie les données de quantité et de prix unitaire, le code ne fonctionne que pour les données de la première ligne du tableau. Comment puis-je modifier ce code pour toutes les données de boucle entrantes ?

Panier.php :

<form action="" méthode="POST">

<table class="table table-sm mb-3 text-center align-middle">
   <tête>
      <tr>
         <th>Nom du produit</th>
         <th>Quantité</th>
         <th>Prix unitaire</th>
         <th>Prix total</th>
      ≪/tr>
   ≪/tête>
   <corps>
      <?php foreach($ProductTbl as $productdata){ ?>
      <tr>
         <td><?= $productdata->productname ?></td>
         <td><classe d'entrée="quantité du centre de texte w-25" type="texte" nom="quantité[]" valeur="0"></td>
         <td><input class="w-25 text-center unitprice" type="text" name="unitprice[]" value="<?= $productdata->unitprice ?> ;" désactivé = " désactivé "></td>
         <td><input class="w-25 text-center prix total" type="text" nom="prix total[]" ;/td>
      ≪/tr>
      <?php } ?>
   </tcorps>
</table>

Code Javascript :

$(document).ready(function() {
    $('.quantity').keyup(function() {
    var quantité = $('.quantity').val();
    var prix unitaire = $('.unitprice').val();
    var prix total = $('.prix total').val();
 
    var résultat = quantité * prix unitaire ;
      $('.prixtotal').val(result);
    });
  });
});
Imprimer :
Image
Comment puis-je modifier le code pour qu'il s'exécute sur toutes les lignes ? 
            

Answer 1

Vous avez spécifié class，而不是id。这意味着您无法轻松地区分它们。但是，通过一些巧妙的 JQuery 代码，您可以识别数量发生更改的表行，然后获取 quantity 和 unitprice pour l'entrée et défini prix total 代码> :

$(document).ready(function() {
    $('.quantity').keyup(function() {
        let tableRow = $(this).parent().parent();
        let quantity = tableRow.find('.quantity').val();
        let unitprice = tableRow.find('.unitprice').val(); 
        let totalprice = quantity * unitprice;
        tableRow.find('.totalprice').val(totalprice);
    })
});

Donc ici, nous obtenons la quantité saisie $(this)，并获取父级两次：首先是 ，然后是 。我们将其存储在tableRow$(this), et obtenons le parent deux fois : d'abord

, puis . Nous le stockons dans tableRow. Étant donné que nous connaissons maintenant les lignes du tableau, nous pouvons utiliser find()

pour accéder à l'entrée. 一个>Pour un exemple de code, veuillez consulter :

https://codepen.io/kikosoft/pen/oNMjqLd🎜🎜