0

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

场景是，当用户输入数量和价格时，总计将使用jQuery自动更改，总计也将自动更改。和同样的row2。我的问题是，我无法id从我的PHP 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

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));
    });
});
于 2013-08-15T03:46:51.920 回答
0

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

于 2013-08-15T03:27:20.857 回答
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 回答