jquery，計算字段總和（動態）

Question

我已經有一個搜索，但還沒有找到任何我想要做的事情。

我有一個動態的形式，每個項目有2個輸入框，1是一個值，另一個是數量。 例如

<table class="table table-striped table-condensed table-bordered"> 
<thead> 
    <tr> 
     <th>Item</th> 
     <th width="20%">Value</th> 
     <th width="20%">Quantity</th> 
     <th class="actions">Total</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Item</td> 
     <td><input type="text" class="input-small" name="var_1" value="0"></td> 
     <td><input type="text" class="input-small" name="var_1_1" value="0"></td> 
     <td>$<span class="amount"></span> </td> 
    </tr> 
    <tr> 
     <td>Item</td> 
     <td><input type="text" class="input-small" name="var_2" value="0"></td> 
     <td><input type="text" class="input-small" name="var_2_2" value="0"></td> 
     <td>$<span class="amount"></span> </td> 
    </tr> 
    <tr> 
     <td colspan="3"><strong>Total event cost (viability)</strong></td> 
     <td><strong>$<div class="total_amount">total</div></strong></td> 
    </tr> 
</tbody> 

所以我需要計算val_1 X val_1_1 =總然後添加總所有向上末（每個項目）。

我希望我會找到一些可以無限制使用的東西。

Answer 1

如何：jsFiddle example。

的jQuery：

function doCalc() { 
    var total = 0; 
    $('tr').each(function() { 
     $(this).find('span.amount').html($('input:eq(0)', this).val() * $('input:eq(1)', this).val()); 
    }); 
    $('.amount').each(function() { 
     total += parseInt($(this).text(),10); 
    }); 
    $('div.total_amount').html(total); 
} 
$('button').click(doCalc);​ 

Answer 2

我認爲這會做你想找的。

function calcCost() { 
    var total = 0; 

    $('table tr').each(function() { 
    if ($(this).find('td').length && $(this).find('td input').length) { 
     var quant = parseInt($(this).find('td input').eq(0).val()), 
     price = parseInt($(this).find('td input').eq(1).val()); 
     $(this).find('.amount').html(quant * price); 
     total += quant * price; 
    } 
    }); 

    $('.total_amount').html(total); 
} 

calcCost(); 

$('input').on('keyup', function() { 
    calcCost(); 
}); 

Answer 3

你最大的問題是真的，你有沒有簡單的方法，以確保你識別哪些字段值，哪些是數量。按照你寫它的方式，任何帶有一個下劃線的字段名都可以是一個值，但是關於名爲「some_value_1」的字段又如何呢？

只要沒有人在表格中添加更多列，使用表格定位就是一個很好的解決方案。我認爲你應該使用一個類來表示哪個字段是一個值，或哪個字段是數量。

不管怎樣，我的解決方案，稍詳細的爲清楚：

<form> 
     <label>cost: <input type="text" name="cost_1" size="5" class="summable"/></label> 
     <label>qty: <input type="text" name="cost_1_qty" size="2"/></label><br/> 

     <label>cost: <input type="text" name="cost_2" size="5" class="summable"/></label> 
     <label>qty: <input type="text" name="cost_2_qty" size="2"/></label><br/> 

     <label>cost: <input type="text" name="cost_3" size="5" class="summable"/></label> 
     <label>qty: <input type="text" name="cost_3_qty" size="2"/></label><br/> 

     <strong id="summation"></strong><br/> 
    </form> 
    <script type="text/javascript"> 

     function doTotal() { 
      var total = 0.0; 

      $(".summable").each(function (idx, element) { 
       $this = $(this); 

       var cost = parseFloat($this.val()); 
       var qty_selector = '[name=' + $this.attr('name') + '_qty' + ']'; // eg: [name=cost_3_qty] 
       var qty = parseFloat($(qty_selector).val()); 
       if (cost && qty) 
        total += cost * qty ; 
      }); 

      $("#summation").html(total.toFixed(2)); 
     } 

     $(document).ready(function() { 
      $("input[type=text]").blur(function (e) { 
       doTotal(); 
      }) 
     });   
    </script>