0

PHPファイルに 10 行を生成するループを作成しました。各行には 4 つのボックスがあり、以下は総計です。

シナリオでは、ユーザーが数量と価格を入力すると、jQueryを使用して合計が自動的に変更され、総計も変更されます。と同じrow2です。私の問題は、PHPフィールドidから にアクセスできないことです。 input

これが私がしたことです：

for($i = 1; $i < 11; $i++){
    echo "<!-- ITEM {$i} -->";
    echo "<tr>";
       echo "<td><input type='text' name='qty{$i}' class='k-textbox' id='qty{$i}'></td>";
       echo "<td><input type='text' name='item{$i}' class='k-textbox' id='item{$i}'></td>";
       echo "<td><input type='text' name='price{$i}' class='k-textbox' id='price{$i}'></td>";
       echo "<td><input type='text' name='total{$i}' class='k-textbox' id='total{$i}'></td>";
    echo "<tr>";
}
<tr>
   <td>GRAND TOTAL</td>
   <td><input type='text' name='gtotal' value='0.00' id='gtotal' class='k-textbox' />
</tr>

ここに私のjQueryコードがあります:

var x = 0;

for(x = 1; x < 11; x++){
  $('#qty'+x, '#price'+x).on('input',function() {
     var qty = parseInt($('#qty'+x).val());
     var price = parseFloat($('#price'+x).val());
      $('#total'+x).val((qty * price ? qty * price : 0).toFixed(2));
  });
}

それで全部です。あなたが私を助けてくれることを願っています。

4

3 に答える 3

0

まず、次のように html を生成し、クラスを使用してトリガーをアタッチし、テストするために呼び出されるカスタム タイプを定義し、行を追跡するためにdata-type追加します。data-row

for($i = 1; $i < 11; $i++){
    echo "<tr>";
       echo "<td><input type='text' data-row='{$i}' data-type='qty' name='qty{$i}' class='k-textbox' id='qty{$i}'></td>";
       echo "<td><input type='text' data-row='{$i}' data-type='item' name='item{$i}' class='k-textbox' id='item{$i}'></td>";
       echo "<td><input type='text' data-row='{$i}' data-type='price' name='price{$i}' class='k-textbox' id='price{$i}'></td>";
       echo "<td><input type='text' data-row='{$i}' data-type='total' name='total{$i}' class='k-textbox' id='total{$i}'></td>";
    echo "<tr>";
}

次に、冗長なループを必要とせずに jquery で作業できます

<script type="text/javascript">
   $(function () {
          $(".k-textbox").input(function (evt) {
               var that = $(this);
               if (that.attr('data-type') != 'price' && that.attr('data-type') != 'qty) return;
               var row = that.attr('data-row');
               var qty = parseInt($('#qty'+row).val());
               var price = parseFloat($('#price'+row).val());
               $('#total'+row).val((qty * price ? qty * price : 0).toFixed(2));
          });
    });
</script>
于 2013-08-15T03:30:53.743 に答える