Question

我有以下输入表单，用户可以在按下按钮时动态添加更多输入字段。我想用jquery做的是每当我在相应的replacement_part_qty []或replacement_part_price []

上有.keyup事件时更新所有的total_cost []字段。

    count     test
13   4121  {Test1}
23   2859  {Test1}
26   2125  {Test1}
0    1569  {Test1}
5    4620  {Test2}
27   4575  {Test2}
25   4336  {Test2}
22   3870  {Test2}
9    2460  {Test2}
17   2083  {Test2}
11   1689  {Test2}
24   1549  {Test2}
2    1093  {Test2}
4    4711  {Test3}
10   4536  {Test3}
12   4359  {Test3}
8    4288  {Test3}
18   4167  {Test3}
20   4085  {Test3}
15   3841  {Test3}
3    3379  {Test3}
7    3108  {Test3}
28   3027  {Test3}
21   2927  {Test3}
14   2491  {Test3}
1    2128  {Test3}
16   2114  {Test3}
19   2045  {Test3}
6    1927  {Test3}
29   1410  {Test3}

我在新的条目按钮上创建了一个.click事件，因为我没有让它在.keyup事件上正常工作。.add_more_lines按钮上的事件问题是用户需要添加一个新行当他想查看前一行的总成本时，另外如果我在前一行上更改了某些内容，那么这些值将不会更新，因为代码只会记忆最后一行的值。

理想情况是，无论何时用户更改某一行的价格或数量，都会重新计算该行的total_cost。

Jquery的

<div class="form-group col-xs-1">
    <label>Part price</label>
    <input type="number" class="form-control" name="replaced_part_price[]" id="replaced_part_price">
</div>
<div class="form-group col-xs-1">
    <label>Part Qty</label>
    <input type="number" class="form-control" name="replaced_part_qty[]" id="replaced_part_qty">
    </div>
<div class="form-group col-xs-1">
    <label>Total cost</label>
    <input type="number" class="form-control" name="total_cost[]" id="total_cost" readonly>
</div>

Answer 1

我在这篇文章中找到了答案：Jquery multiply data in textbox array并对其进行了调整以适用于恐怖添加的字段

以下代码：

<div id="container1">
<button class="btn btn-primary btn-md add_more_button" id="add_form_field">New Line &nbsp; <span>+ </span></button>
    <div class="form-group col-xs-3">
        <label>Price</label>
            <input type="number" class="form-control a" name="pret_piesa_inlocuita[]">
        <label>Qty</label>
            <input type="number" class="form-control b" name="cantitate_piesa_inlocuita[]">
        <label>Piece Price</label>
            <input type="number" class="form-control price" name="cost_piese[]" readonly>
    </div>
</div>

New Line jQuery：

$(add_button).click(function(e){ 

var wrapper = $("#container1"); 

        $(wrapper).append('<div class="form-group col-xs-3">\
        <label>Price</label>\
            <input type="number" class="form-control a" name="pret_piesa_inlocuita[]">\
        <label>Qty</label>\
            <input type="number" class="form-control b" name="cantitate_piesa_inlocuita[]">\
        <label>Piece Price</label>\
            <input type="number" class="form-control price" name="cost_piese[]" readonly>\
        </div>');
    }
});

计算字段功能：

$(document).on('keyup', '.a,.b', function() {
    var textValue1 = $(this).parent().find('.a').val();
    var textValue2 = $(this).parent().find('.b').val();
$(this).parent().find('.price').val(textValue1 * textValue2); 
    var sum = 0;
$('.price').each(function() {
   sum += +$(this).val();
   });
});

jquery循环遍历html元素数组并计算第3个元素输入中的值

1 个答案: