Jqueryのforeachループを使用して複数の入力ボックスからデータを抽出する

Question

プロジェクトのオーダーを作成しています。 Foreach ループを使用して、データベースから作成したテーブルにデータを取得しています。ただし、数量と単価のデータを乗算すると、コードはテーブルの最初の行のデータに対してのみ機能します。すべての受信ループ データに対してこのコードを変更するにはどうすればよいですか?

ショッピングカート.php:

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

<table class="table table-sm mb-3 text-center align-middle">
   <頭>
      <tr>
         <th>商品名</th>
         数量
         単価
         合計価格
      </tr>
   </頭>
   <みんな>
      <?php foreach($ProductTbl as $productdata){ ?>
      <tr>
         <td><?= $productdata->製品名 ?></td>
         <td><input class="w-25 テキスト中心数量" type="text" name="quantity[]" value="0"></td>
         <td><input class="w-25 text-center 単価" type="text" name="unitprice[]" value="<?= $productdata->unitprice ?> ;" 無効 = "無効" ></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').val();
    var 単価 = $('.単価').val();
    var totalprice = $('.totalprice').val();
 
    var 結果 = 数量 * 単価;
      $('.totalprice').val(result);
    });
  });
});

印刷: 画像

すべての行で実行されるようにコードを編集するにはどうすればよいですか?

Answer 1

入力に id ではなく class を指定しました。つまり、それらを簡単に区別することはできません。ただし、いくつかの賢い JQuery コードを使用すると、数量が変更されたテーブルの行を特定し、quantity と unitprice を取得して、totalprice :

を設定できます。 リーリー

したがって、ここでは数量入力 $(this) を取得し、親を 2 回取得します。最初に 、次に 。それを tableRow に保存します。テーブルの行がわかったので、find() を使用して入力にアクセスできます。

サンプル コードについては、次を参照してください: https://codepen.io/kikosoft/pen/oNMjqLd