Question

我在 PHP 文件中创建了一个生成10行的循环。每行有四个框，下面是总数。

场景是，当用户输入数量和价格时，总数将自动使用 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));
  });
}

这就是全部。我希望你能帮助我。

Answer 1

没有input事件。

获取id属性很容易，您真正需要做的是添加$(documnet).ready(..)并将input事件替换为change事件。

所以，更新js代码：

更新：我错误地使用 # selector ，并将其更新为 [id^=...]

$(document).ready(function(){
    // well,$('selector1,selector2')  not  $('selector1','selector2')
    $('[id^=qty] , [id^=price]').on('change',function() {
        var index=this.id.match(/\d+/)[0];
        var qty = parseInt($('#qty'+index).val());
        var price = parseFloat($('#price'+index).val());
        $('#total'+index).val((qty * price ? qty * price : 0).toFixed(2));
    });
});

Answer 2

我可能没有正确理解这个问题，但为什么不让PHP计算总计，然后将值放在总计中呢？

Answer 3

首先按如下方式生成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>

如何计算使用PHP数据循环执行javascript / jquery计算？

3 个答案: