Question

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

一些元素是数量和价格。我想根据用户输入的内容更改值。所以如果他选择qty = 4和价格= 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

，你的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 2

则应该通过添加类这样的调整你的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 3

你有（大致）这样的结构：

<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 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); 
});