Ekstrak data daripada berbilang kotak input menggunakan gelung foreach Jquery

Question

Saya sedang membuat pesanan untuk projek. Saya menggunakan gelung Foreach untuk menarik data daripada pangkalan data ke dalam jadual yang saya buat. Walau bagaimanapun, apabila saya mendarabkan data kuantiti dan harga unit, kod tersebut hanya berfungsi untuk data dalam baris pertama jadual. Bagaimanakah saya boleh mengubah suai kod ini untuk semua data gelung masuk?

Keranjang belanja.php:

<form action="" kaedah="POST">

<table class="jadual jadual-sm mb-3 teks-pusat jajar-tengah">
   <kepala>
      <tr>
         <th>Nama Produk</th>
         <th>Kuantiti</th>
         <th>Harga Seunit</th>
         <th>Jumlah Harga</th>
      </tr>
   </kepala>
   <tbody>
      <?php foreach($ProductTbl sebagai $productdata){ ?>
      <tr>
         <td><?= $productdata->productname ?></td>
         <td><kelas input="w-25 kuantiti pusat teks"jenis="teks"nilai="0"></td>
         <td><kelas input="w-25 text-center unitprice"type="text"name="unitprice[]"nilai="<?= $productdata->unitprice ?> ;" disabled="disabled"></td>
         <td><input class="w-25 text-center totalprice"text"nama="totalprice="" ;/td>
      </tr>
      <?php } ?>
   </tbody>
</table>

Kod JavaScript:

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

Cetak: Gambar

Bagaimanakah saya boleh mengedit kod untuk dijalankan pada semua baris?

Answer 1

Anda tentukan class，而不是id。这意味着您无法轻松地区分它们。但是，通过一些巧妙的 JQuery 代码，您可以识别数量发生更改的表行，然后获取 quantity 和 unitprice untuk input dan tetapkan jumlah harga :

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

Jadi di sini kita mendapat input kuantiti $(this)，并获取父级两次：首先是 ，然后是 。我们将其存储在tableRow$(this), dan dapatkan induk dua kali: pertama , kemudian < /tr>< /kod>. Kami menyimpannya dalam tableRow. Memandangkan kita kini mengetahui baris jadual, kita boleh menggunakan

find()

untuk mengakses input. Untuk kod contoh, sila lihat:

https://codepen.io/kikosoft/pen/oNMjqLd🎜🎜