遍歷表格行計算總計（數量*每行成本）

Question

所以我基本上具有在格式多行：

<tr class="items" id="items"> 
    <td><input type="text" name="description[]" id="description[]" style="width:450px;" /></td> 
    <td><input type="text" name="quantity[]" id="quantity[]" style="width:40px;text-align:center;" onblur="CaclulateQuantityTotal();"/></td> 
    <td><input type="text" name="cost[]" id="cost[]" style="width:40px;text-align:center;" onblur="CaclulateCostTotal();"/></td> 
    <td><select name="currency[]" id="currency[]"><option value="USD">USD</option><option value="CAD">CAD</option></select></td> 
    <td style="text-align:right;"><input type="text" name="total[]" id="total[]" style="width:40px;text-align:center;" readonly="readonly" /></td> 
    <td><a href="#" id="add_item">+</a></td> 
</tr> 

我基本上想總[]是（該行）成本*數量。

我的問題是我知道如何循環遍歷所有數量[]和貨幣[]使用jquery，但我不知道如何匹配它們在每行的基礎上。

任何人都可以幫忙嗎？

Answer 1

$('tr.items').each(function(i,el) { 
    var $this = $(this), 
     $cost = $this.find('[name="cost\\[\\]"]'), 
     $quant = $this.find('[name="quantity\\[\\]"]'), 
     c = parseFloat($cost.val()), 
     q = parseInt($quant.val(), 10), // always use a radix 
     total = c * q || 0; // default value in case of "NaN" 
    $this.find('[name="total\\[\\]"]').val(total.toFixed(2)); 
}); 

http://jsfiddle.net/mblase75/AtcPc/

Answer 2

你可以遍歷$（ 「項目 」），並比較$（項目[1]）。兒童（「 成本」）和$（項目[1]）。兒童（「量」）（當然，你必須補充一點，作爲一個階級對那些投入）

因此，像 -

var items = $(".items").get(); 

for(var i = 0; i < items.length; i++) 
{ 
    var cost = $(items[i]).children(".cost").val() * $(items[i]).children(".quantity").val(); 
} 

這可能不準確，但它應該讓你開始。

Answer 3

在函數調用中添加對象從HTML

HTML

<tr class="items" id="items"> 
     <td><input type="text" name="description[]" id="description[]" /></td> 
     <td><input type="text" name="quantity[]" id="quantity[]" onblur="CaclulateQuantityTotal(this);"/></td> 
     <td><input type="text" name="cost[]" id="cost[]" onblur="CaclulateCostTotal(this);"/></td> 
     <td><select name="currency[]" id="currency[]"><option value="USD">USD</option><option value="CAD">CAD</option></select></td> 
     <td><input type="text" name="total[]" id="total[]" readonly="readonly" /></td> 
     <td><a href="#" id="add_item">+</a></td> 
</tr> 

的Javascript

function CaclulateQuantityTotal(obj) { 
    var $tr = $(obj).closest('tr.items'); 
    //you now have access to the tr the function is called from, do whatever you want! 
    var $q = $tr.find('input[name=quantity]'); // gives you quantity, etc... 
} 

Answer 4

添加一些類，所以你可能會得到的值更容易，再加上...你不應該有重複的ID :)

 <tr class="items" id="items"> 
      <td><input type="text" name="description[]" id="description[]" style="width:450px;" /></td> 
      <td><input type="text" name="quantity[]" id="quantity[]" style="width:40px;text-align:center;" onblur="CaclulateQuantityTotal();" class="quantity"/></td> 
      <td><input type="text" name="cost[]" id="cost[]" style="width:40px;text-align:center;" onblur="CaclulateCostTotal();" class="cost"/></td> 
      <td><select name="currency[]" id="currency[]"><option value="USD">USD</option><option value="CAD">CAD</option></select></td> 
      <td style="text-align:right;"><input type="text" name="total[]" id="total[]" style="width:40px;text-align:center;" readonly="readonly" class="total"/></td> 
      <td><a href="#" id="add_item">+</a></td> 
     </tr> 

jQuery代碼：

(function() { 
    $.each($('tr.items'), function(){ 
     var quantity = $(this).children('td').children('.quantity').val(); 
     var cost = $(this).children('td').children('.cost').val(); 
     var total = quantity*cost; 
     $(this).children('td').children('.total').val(total); 
    }); 
}()); 

希望它能幫助，這裏的工作演示：http://jsfiddle.net/MvFYd/