使用jquery進行計算和小計分組

Question

我正在開發一個Web應用程序，並且想要創建類似發票計算的內容，但是使用子組，因此最後我需要組合總數的結果以及小計。

這是我走到這一步：Fiddle

$(function() { 
    $("#items").keyup(function(event) { 
     var total = 0; 
     $("#items .targetfields").each(function() { 
      var qty = parseInt($(this).find(".quantity").val()); 
      var rate = parseInt($(this).find(".rate").val()); 
      var subtotal = qty * rate; 
      $(this).find(".subtotal").val(subtotal); 
      if (!isNaN(subtotal)) total += subtotal; 
     }); 
     $("#total").html(total); 
    }); 
}) 

最終，我的工作對這樣的事情：

我發現了很多關於發票計算實例但不包括小組或小計。

我希望有人能幫助我一個小例子。

Answer 1

看看這是你腦子裏想的是什麼：http://jsfiddle.net/yaMRQ/23/

<table class="items"> 
    <tr class="targetfields"> 
     <td><input type="text" name="quantity" class="quantity" /></td> 
     <td><input type="text" name="rate" class="rate" size="5" /></td> 
     <td><input type="text" name="sub_total" class="subtotal" /></td> 
    </tr> 
    <tr class="targetfields"> 
     <td><input type="text" name="quantity" class="quantity" /></td> 
     <td><input type="text" name="rate" class="rate" size="5" /></td> 
     <td><input type="text" name="sub_total" class="subtotal" /></td> 
    </tr> 
    <tr> 
     <td>Group:</td> 
     <td colspan="2" align="right" class="g_total"></td> 
    </tr> 
</table> 
<table class="items"> 
    <tr class="targetfields"> 
     <td><input type="text" name="quantity" class="quantity" /></td> 
     <td><input type="text" name="rate" class="rate" size="5" /></td> 
     <td><input type="text" name="sub_total" class="subtotal" /></td> 
    </tr> 
    <tr class="targetfields"> 
     <td><input type="text" name="quantity" class="quantity" /></td> 
     <td><input type="text" name="rate" class="rate" size="5" /></td> 
     <td><input type="text" name="sub_total" class="subtotal" /></td> 
    </tr> 
    <tr> 
     <td>Group:</td> 
     <td colspan="2" align="right" class="g_total"></td> 
    </tr> 
</table> 
<br/>---<br/>Total: <span id="total"></span> 

$(function() { 
    $(".items").keyup(function(event) { 
    var total = 0; 
    $(".items").each(function(){ 
     var gtotal = 0; 
     $(this).find(".targetfields").each(function() { 
      var qty = parseInt($(this).find(".quantity").val()); 
      var rate = parseInt($(this).find(".rate").val()); 
      var subtotal = qty * rate; 
      $(this).find(".subtotal").val(subtotal); 
      if(!isNaN(subtotal)) 
       gtotal+=subtotal; 
     }); 
     $(this).find(".g_total").html("EUR "+gtotal); 
     total+=gtotal 
    }); 
    $("#total").html("EUR "+total); 
    }); 
})​