JQuery 根据选择在 Table 中添加新行，但最新选择每次都会覆盖整个 table

Question

我不擅长javascript框架我在Laravel做这个项目

如果需要调用该代码的任何内容，我将提供

我想要实现的是，当用户从下拉列表中选择一个产品值时，会动态添加一行，效果非常好。

现在这一行包含有关所选项目的数据它的名称描述价格和数量和金额第一次工作正常

然后将新产品添加到购物车，这也会向 Table 添加一行，但之前的产品记录也会被该产品值替换。

产品的第一张图片选择

另一个产品的第二张图片选择

我们去吧，我们失去了第一个产品。和产品变化，最新的产品覆盖了整个 table 及其数据，而之前的产品已经消失

备注

我根据我指定的唯一类在文本字段中设置值。

Jquery代码

$('.ProductClass').delegate('.Product','change', function () {
  var inventory = $('.Product').html();
  var qty=1; 

  var n = ($('.neworderbody tr').length - 0) + 1;
  var tr = '<tr><td><input type="text" class="inventId form-control" name="inventId[]" readonly></td>' +

  '<td ><input type="number" class="qty form-control"  name="qty[]" ></td>' +

  '<td style="display: none;"><input type="text" class="costprice form-control" name="costprice[]" readonly></td>' +

  '<td><input type="text" class="price form-control" name="price[]" readonly></td>' +

  '<td><input type="text" class="amount form-control" name="amount[]" readonly></td>' +

  '<td><span class="fa fa-trash delete" data-toggle="tooltip" data-original-title="Remove Item" value="x" style="margin-left: 36px;margin-top: 14px;"></span></td></tr>';
  $('.neworderbody').append(tr);


        var tr = $(this).parent().parent();
        var inventory = $('.Product option:selected').attr('data-name');
        console.log(inventory);
        var SalesPrice = $('.Product option:selected').attr('data-price');
        var CostPrice = $('.Product option:selected').attr('cost-price');
        var description = $('.Product option:selected').attr('data-pro');
        $('.inventId').val(inventory);
        $('.price').val(SalesPrice);         

        $('.qty').val(qty);
        var qty = tr.find('.qty').val() - 0;
        var price = tr.find('.price').val() - 0;

        var total=qty*price;
        tr.find('.amount').val(total);
  //console.log(qty+"--------"+price);

});

非常感谢你帮助我

Answer 1

谢谢大家关注我的问题

我找到了将值嵌入文本字段的解决方案，所以我所做的只是获取变量的值，然后将值分配给 Table[=11= 中的特定文本字段]

它工作得很好

如果谁有好的解决办法，请分享

代码

   $('.ProductClass').delegate('.Product','change', function () {
  var inventory = $('.Product').html();
  var qty=1; 
  var inventory=null;
  var n = ($('.neworderbody tr').length - 0) + 1;
  n=1;
  var inventory = $('.Product option:selected').attr('data-name');
  //onsole.log(inventory);
  var SalesPrice = $('.Product option:selected').attr('data-price');
  var CostPrice = $('.Product option:selected').attr('cost-price');
  var description = $('.Product option:selected').attr('data-pro');
  var total=qty*SalesPrice;

  var tr = '<tr id="row">' + 

  '<td><input type="text" class="inventId form-control"  value='+inventory+' name="inventId[]" readonly /></td>'+

  '<td > <input type="number" class="qty form-control"  value='+qty+' name="qty[]" > </td>' +

  '<td style="display: none;"><input type="text" class="costprice form-control" name="costprice[]"  value='+CostPrice+' readonly></td>' +

   '<td><input type="text" class="price form-control" name="price[]"   value='+SalesPrice+' readonly></td>' +

   '<td><input type="text" class="amount form-control" name="amount[]"  value='+total+' readonly></td>' +

   '<td><span class="fa fa-trash delete" data-toggle="tooltip" data-original-title="Remove Item" value="x" style="margin-left: 36px;margin-top: 14px;"></span></td>' +
    '</tr>'; 
  $('.neworderbody').append(tr);

});

JQuery 根据选择在 Table 中添加新行，但最新选择每次都会覆盖整个 table

JQuery Adding new Row in Table based on Selection, but Latest selection override the whole table everytime

php

jquery

selectionchanged

laravel-5.3