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>