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>