亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

使用Jquery的foreach循環(huán)從多個(gè)輸入框中提取數(shù)據(jù)
P粉278379495
P粉278379495 2023-08-31 19:09:32
0
1
616
<p>我正在為一個(gè)專案建立一個(gè)訂單。我使用 Foreach 循環(huán)將資料從資料庫提取到我創(chuàng)建的表中。但是,當(dāng)我將數(shù)量和單價(jià)資料相乘時(shí),該程式碼僅適用於表格第一行中的資料。如何針對所有傳入循環(huán)資料修改此程式碼? </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>如何編輯程式碼以在所有行上運(yùn)行? </p>
P粉278379495
P粉278379495

全部回覆(1)
P粉707235568

您為輸入指定了class,而不是id。這意味著您無法輕鬆地區(qū)分它們。但是,透過一些巧妙的 JQuery 程式碼,您可以識(shí)別數(shù)量發(fā)生變更的表行,然後取得 quantityunitprice 並設(shè)定 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);
    })
});

因此,我們在這裡獲取數(shù)量輸入$(this),並獲取父級(jí)兩次:首先是##,然後是

一個(gè)>

##################### ########。我們將其儲(chǔ)存在###tableRow###中。鑑於我們現(xiàn)在知道表格行,我們可以使用 ###find()### 來存取輸入.### ###範(fàn)例程式碼請參閱:###https://codepen.io/kikosoft/pen/oNMjqLd######
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板