Extrahieren Sie Daten aus mehreren Eingabefeldern mithilfe der foreach-Schleife von Jquery

Question

Ich erstelle einen Auftrag für ein Projekt. Ich verwende eine Foreach-Schleife, um Daten aus der Datenbank in eine von mir erstellte Tabelle zu ziehen. Wenn ich jedoch die Mengen- und Stückpreisdaten multipliziere, funktioniert der Code nur für die Daten in der ersten Zeile der Tabelle. Wie kann ich diesen Code für alle eingehenden Schleifendaten ändern?

Warenkorb.php:

<form action=""

<table class="table table-sm mb-3 text-center align-middle">
   <thead>
      <tr>
         <th>Produktname</th>
         <th>Menge</th>
         <th>Stückpreis</th>
         <th>Gesamtpreis</th>
      </tr>
   </thead>
   <tbody>
      <?php foreach($ProductTbl as $productdata){ ?>
      <tr>
         <td><?= $productdata->productname ?></td>
         <td><input class="w-25 text-center amount" type="text" name="quantity[]"
         <td><input class="w-25 text-center unitprice" name="unitprice[]" value="<?= $productdata->unitprice ?> ;"disabled="disabled"></td>
         <td>"input class="w-25 text-center totalprice" name="disabled"> ;/td>
      </tr>
      <?php } ?>
   </tbody>
</table>

Javascript-Code:

$(document).ready(function() {
    $('.quantity').keyup(function() {
    var Menge = $('.quantity').val();
    var Einheitspreis = $('.Einheitspreis').val();
    var totalprice = $('.totalprice').val();
 
    var Ergebnis = Menge * Stückpreis;
      $('.totalprice').val(result);
    });
  });
});

Drucken: Bild

Wie kann ich den Code so bearbeiten, dass er in allen Zeilen ausgeführt wird?

Answer 1

您为输入指定了class，而不是id。这意味着您无法轻松地区分它们。但是，通过一些巧妙的 JQuery 代码，您可以识别数量发生更改的表行，然后获取 quantity 和 unitprice 并设置 totalprice ：

$(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);
    })
});

因此，我们在这里获取数量输入 $(this)，并获取父级两次：首先是 ，然后是 。我们将其存储在tableRow中。鉴于我们现在知道表行，我们可以使用 find() 访问输入.

示例代码请参见：https://codepen.io/kikosoft/pen/oNMjqLd