在jquery

Question

我在php中开发简单的发票，我想出这个结果，我不能通过乘以费率和数量计算价格并在总输入字段上自动显示结果，从哪里开始我在表单标签中使用html表

$(function() {

     // jQuery methods go here...

  $('#itemquantity').change(function() {
    var total = 0.0;

    $("#itemprice").each(function() {
      var quantity = $('#itemquantity').val();
      var rate = $('#itemrate').val();
      total = quantity * rate;
      $('#itemprice').text('' + total);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="inventory" id="inventory">
  <thead>
    <tr>
      <th><span>Item</span></th>
      <th><span>Description</span></th>
      <th><span>Rate</span></th>
      <th><span>Quantity</span></th>
      <th><span>Price</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="items" name="item"></td>
      <td><input type="text" class="items" name="itemdesc"></td>
      <td><input type="text" class="items" name="itemrate" id="itemrate"></td>
      <td><input type="text" id="itemquantity" class="items" name="itemquantity" value="0"></td>
      <td><input type="text" id="itemprice" id="price" class="items" name="itemprice"></td>
    </tr>
  </tbody>
</table>

Answer 1

这是一个类型问题。

您必须将parseFloat（如果它们是float）或parseInt添加到值中，如下所示：

 var quantity = parseFloat($('#itemquantity').val());
  var rate = parseFloat($('#itemrate').val());
  total = quantity * rate;

来源：https://www.w3schools.com/jsref/jsref_parsefloat.asp

Answer 2

您在单个选定元素上使用jQuery.each而未使用其参数。

据我所知，您需要将 price 的值绑定到数量和 rate 。因此，如果更改了数量或费率，则必须计算并显示适当的价格值。

您可以创建一个计算价格的函数，并将其绑定到其依赖因子。

$(function() {
    // jQuery methods go here...
    $('#itemquantity').on("change", function() {
        calculatePrice();
    });
    $('#itemrate').on("change", function() {
        calculatePrice();
    });

    function calculatePrice(){
        var quantity = $('#itemquantity').val();
        var rate = $('#itemrate').val();
        if(quantity != "" && rate != ""){
            var price = quantity * rate;
        }
        $('#itemprice').val(price.toFixed(2));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="inventory" id="inventory">
  <thead>
    <tr>
      <th><span>Item</span></th>
      <th><span>Description</span></th>
      <th><span>Rate</span></th>
      <th><span>Quantity</span></th>
      <th><span>Price</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="items" name="item"></td>
      <td><input type="text" class="items" name="itemdesc"></td>
      <td><input type="text" class="items" name="itemrate" id="itemrate"></td>
      <td><input type="text" id="itemquantity" class="items" name="itemquantity" value="0"></td>
      <td><input type="text" id="itemprice" id="price" class="items" name="itemprice"></td>
    </tr>
  </tbody>
</table>