<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">
<頭>
<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></pre>
<p>JavaScript コード: </p>
<pre class="brush:php;toolbar:false;">$(document).ready(function() {
$('.quantity').keyup(function() {
var 数量 = $('.quantity').val();
var 単価 = $('.単価').val();
var totalprice = $('.totalprice').val();
var 結果 = 数量 * 単価;
$('.totalprice').val(result);
});
});
});</pre>
<p>印刷:
画像</p>
<p>すべての行で実行されるようにコードを編集するにはどうすればよいですか? </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
入力に
を設定できます。 リーリーidではなくclassを指定しました。つまり、それらを簡単に区別することはできません。ただし、いくつかの賢い JQuery コードを使用すると、数量が変更されたテーブルの行を特定し、quantityとunitpriceを取得して、totalprice 代码>:したがって、ここでは数量入力
$(this)を取得し、親を 2 回取得します。最初にtableRowに保存します。テーブルの行がわかったので、find() を使用して入力にアクセスできます。サンプル コードについては、次を参照してください: https://codepen.io/kikosoft/pen/oNMjqLd一个>