Question

我有一个动态创建的表单，用户可以单击“添加行”并在表单中获取新元素。

一些要素是数量和价格。我想根据用户输入的内容更改值。因此，如果他选择qty = 4且price = 10，我希望金额= 40。

由于输入ID是动态生成的，我不知道用什么作为价格或数量的选择器。

var form = "<tr><td>Quantity</td>
                <td><input class='qty' type='text' id='qty[]' name='qty[]'></td>";

    form += "<td>Part Num</td>
             <td><input type='text' id='part[]' name='part[]'></td>";

    form += "<td>Description</td>
             <td><input class='desc' type='text' id='desc[]' name='desc[]'></td>";

    form += "<td>Unit Price</td>
             <td><input type='text' id='price[]' name='price[]'></td>";

    form += "<td>Amount</td>
             <td><input type='text' id='amount[]' name='amount'></td></tr>";

            $('#addItem').click(function(){
                    $('#itemsTable').append(form);
            });


     $(document).on('change','.qty',function(){

          //What can i use as a selector for value_of_qty and value_of_price here???

          //var total = $(value_of_qty) * $(value_of_price);
          //$(id_of_amount).val(total);
      });

在表单提交上，我看到以下内容：

[qty] => Array
    (
        [0] => asdfdasf
        [1] => asdfdasf
    )
and so on....

Answer 1

你有（大致）这种结构：

<tr>
  <td><input class="qty"></td>
  <td><input name="price[]"></td>
</tr>

因此，假设您有.qty输入，那么您需要做的就是升级到tr并获得input[name='price[]']。在代码中：

$(document).on('change','.qty',function(){
  var $qty = $(this);
  var $price = $qty.closest("tr").find("input[name='price[]']");
});

Answer 2

正如我在评论中所述，您的HTML无效，因为您有重复的id。您应该动态生成附加到父元素的HTML，并为每个附件分配唯一的id值。这就是我要做的事情：

var g_ROWNUM = 1;

$('#addItem').click(function() {

    var form = '\
        <tr>\
            <td>Quantity</td><td><input class="qty" type="text" id="qty_${num}" name="qty[]"></td>\
            <td>Part Num</td><td><input type="text" id="part_${num}" name="part[]"></td>\
            <td>Description</td><td><input class="desc" type="text" id="desc_${num}" name="desc[]"></td>\
            <td>Unit Price</td><td><input type="text" id="price_${num}" name="price[]"></td>\
            <td>Amount</td><td><input type="text" id="amount_${num}" name="amount[]"></td>\
        </tr>\
    '.replace(/\$\{num\}/g,g_ROWNUM++);

    $('#itemsTable').append(form);

});

$(document).on('change', '.qty', function() {

    var qtyInput = $(this);
    var num = qtyInput.attr('id').replace(/^qty_/,'');
    var priceInput = $('#price_'+num);
    var amountInput = $('#amount_'+num);

    var total = qtyInput.val()*priceInput.val();
    amountInput.val(total);

});

如您所见，这允许您提取生成的数字并使用它来检索与更改的数量元素在同一行中的价格和金额元素，然后将所需的任何动态更改应用于该行中的元素

http://jsfiddle.net/p6wrkne4/1/

Answer 3

你应该通过添加这样的类来重构你的html：

<tr class="tableRow">
    <td>Quantity</td>
    <td><input class='qty' type='text' id='qty[]' name='qty[]'/></td><td>Part Num</td>
    <td><input type='text' id='part[]' name='part[]'/></td>
    <td>Description</td>
    <td><input class='desc' type='text' id='desc[]' name='desc[]'/></td>
    <td>Unit Price</td>
    <td><input type='text' class="price" id='price[]' name='price[]'/></td>
    <td>Amount</td>
    <td><input type='text' class="amount" id='amount[]' name='amount'/></td>
</tr>

$(document).on('change', '.qty', function() {
    var qty = $(this).val();
    var price = $(this).closest('.tableRow').find('.price').val();
    var total = qty * price;
    $(this).closest('.tableRow').find('.amount').val(total);
});

Answer 4

试试这段代码：

$(document).on('change','.qty',function(){
   var qtyInput = $(this);
   var price = qtyInput.closest("tr").find("input[name='price[]']").val();
   var amount = qtyInput.val() * price;        
   qtyInput.closest("tr").find("input[name=amount]").val(amount);
});

在jquery中向未知元素id添加值

4 个答案: