在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（如果它們是浮動）或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不使用其參數。

據我瞭解，你需要價格的值綁定到數量和率。因此，如果數量或費率發生變化，則必須計算並顯示適當的價格價格。

您可以制定計算價格的函數，並將其與其相關因素綁定。

$(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>