使用Jquery的foreach循環從多個輸入框中提取數據

Question

我正在為一個專案建立一個訂單。我使用 Foreach 循環將資料從資料庫提取到我創建的表中。但是，當我將數量和單價資料相乘時，該程式碼僅適用於表格第一行中的資料。如何針對所有傳入循環資料修改此程式碼？

購物車.php：

<form action="" method="POST">

<table class="table table-sm mb-3 text-center align-middle">
   <thead>
      <tr>
         <th>Product Name</th>
         <th>Quantity</th>
         <th>Unit Price</th>
         <th>Total Price</th>
      </tr>
   </thead>
   <tbody>
      <?php foreach($ProductTbl as $productdata){ ?>
      <tr>
         <td><?= $productdata->productname ?></td>
         <td><input class="w-25 text-center quantity" type="text" name="quantity[]" value="0"></td></td>
         <td><input class="w-25 text-center unitprice" type="text" name="unitprice[]" value="<?= $productdata-tprice[]" value="<?= $productdata-> ;" disabled="disabled"></td>
         <td><input class="w-25 text-center totalprice" type="text" name="totalprice[]" value="" disabled=""&€t;<t; ;/td>
      </tr>
      <?php } ?>
   </tbody>
</table>

Javascript程式碼：

$(document).ready(function() {
    $('.quantity').keyup(function() {
    var quantity = $('.quantity').val();
    var unitprice = $('.unitprice').val();
    var totalprice = $('.totalprice').val();
 
    var result = quantity * unitprice;
      $('.totalprice').val(result);
    });
  });
});

印刷： 圖

如何編輯程式碼以在所有行上運行？

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######