使用Jquery的foreach循環從多個輸入框中提取數據
P粉278379495
2023-08-31 19:09:32
<p>我正在為一個專案建立一個訂單。我使用 Foreach 循環將資料從資料庫提取到我創建的表中。但是，當我將數量和單價資料相乘時，該程式碼僅適用於表格第一行中的資料。如何針對所有傳入循環資料修改此程式碼？ </p>
<p>購物車.php：</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>Javascript程式碼：</p>
<pre class="brush:php;toolbar:false;">$(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);
});
});
});</pre>
<p>印刷：
圖</p>
<p>如何編輯程式碼以在所有行上運行？ </p>
您為輸入指定了
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######