使用Jquery的foreach循环从多个输入框中提取数据
P粉278379495
P粉278379495 2023-08-31 19:09:32
[PHP讨论组]

我正在为一个项目创建一个订单。我使用 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><input class="w-25 text-center unitprice" type="text" name="unitprice[]" value="<?= $productdata->unitprice ?>" disabled="disabled"></td>
         <td><input class="w-25 text-center totalprice" type="text"  name="totalprice[]" value="" disabled="disabled"> €</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);
    });
  });
});

打印: 图片

如何编辑代码以在所有行上运行?

P粉278379495
P粉278379495

全部回复(1)
P粉707235568

您为输入指定了class,而不是id。这意味着您无法轻松地区分它们。但是,通过一些巧妙的 JQuery 代码,您可以识别数量发生更改的表行,然后获取 quantityunitprice 并设置 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一个>

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号