乘以並添加2個輸入jQuery

Question

我感覺有點愚蠢，但我無法得到它的工作。我想乘以兩個輸入，然後添加所有總數來獲得總計，但它不起作用，我不明白爲什麼。我一直在關注this one這個主題的幾個主題，但我看不出我做錯了什麼。

$(document).ready(function(){ 
 
    $('.qtyorder').on("keyup change",function(){ 
 
     update_amounts(); 
 
    }); 
 
}); 
 

 
function update_amounts(){ 
 
    var sum = 0.00; 
 
    $('#ordertable > tbody > tr').each(function(){ 
 
     var price = $(this).find('.unitprice').val(); 
 
     var qty = $(this).find('.qtyorder').val(); 
 
     var amount = (qty * price) 
 
     sum+=amount; 
 
     $(this).find('.subtotal').text('' + amount); 
 
    }); 
 
    $('.ordertotal').text(sum); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<table class="order-table" id="ordertable"> 
 
    <thead> 
 
     <tr> 
 
      <th class="order-name"></th> 
 
      <th class="order-price">Prix</th> 
 
      <th class="order-qtytotal">Qty</th> 
 
      <th class="order-total">Total</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td class="order-name"><h2>Product1</h2></td> 
 
      <td class="order-price"> 
 
       <input type="text" name="unitprice" class="unitprice" value="30" readonly="readonly" tabindex="-1"> 
 
      </td> 
 
      <td class="order-qtytotal"> 
 
       <input type="number" class="qtyorder" name="qtyorder" min="0"> 
 
      </td> 
 
      <td class="order-total"> 
 
       <input type="text" class="subtotal" name="subtotal" readonly="readonly" tabindex="-1" value="0.00"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="order-name"><h2>Product2</h2></td> 
 
      <td class="order-price"> 
 
       <input type="text" name="unitprice" class="unitprice" value="40" readonly="readonly" tabindex="-1"> 
 
      </td> 
 
      <td class="order-qtytotal"> 
 
       <input type="number" class="qtyorder" name="qtyorder" min="0"> 
 
      </td> 
 
      <td class="order-total"> 
 
       <input type="text" class="subtotal" name="subtotal" readonly="readonly" tabindex="-1" value="0.00"> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<div class="sommeorder"> 
 
    <label for="ordertotal">Total</label> 
 
    <input type="text" class="ordertotal" name="ordertotal" readonly="readonly" tabindex="-1" value="0.00"> 
 
</div>

Answer 1

幾件事情。

首先，您正在使用<input>標籤，因此您可以使用val()而不是text()。這會讓你的價值觀出現。

$(this).find('.subtotal').val(amount); 

---

其次，爲了讓你確保你得到的不是字符串的數字，你可以在parseFloat()包住值。這將允許你使用數字。

var price = parseFloat($(this).find('.unitprice').val()); 
var qty = parseFloat($(this).find('.qtyorder').val()); 

---

第三，出於某種原因，sum += amount沒有正確添加。如果您將其更改爲sum = sum + amount，它將起作用。

下面是它會是什麼樣，當它的工作原理是：

function update_amounts(){ 
    var sum = 0.0; 
    $('#ordertable > tbody > tr').each(function(){ 
     var price = parseFloat($(this).find('.unitprice').val()); 
     var qty = parseFloat($(this).find('.qtyorder').val()); 
     var amount = (qty * price) 

     if (amount > 0) { 
      $(this).find('.subtotal').val(amount); 
      sum = sum + amount; 
     } else { 
      $(this).find('.subtotal').val("0.00"); 
     } 
    }); 

    if (sum > 0) $('.ordertotal').val(sum); 
    else $('.ordertotal').val("0.00"); 
} 

Here's a JSFiddle of it working.