在 jQuery 中向未知元素 ID 添加值

adding values to unknown element ids in jquery

本文关键字：ID 添加 元素 未知 jQuery      更新时间：2023-09-26

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

一些要素是数量和价格。 我想根据用户输入的内容更改值。 因此，如果他选择 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....

你有（大致）这个结构：

<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[]']");
});

正如我在评论中所描述的，您的 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/

你应该通过添加这样的类来重组你的 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);
});

试试这段代码：

$(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);
});
相关文章：