строка таблицы динамического HTML javascript, вызывающая проблемы

У меня есть select option, для выбора которого я создаю таблицу HTML, поскольку я вызываю данные из серверной части на основе выбранной опции, поэтому созданные строки таблицы являются динамическими

то, что я делаю

При изменении параметра выбора я создаю строку таблицы HTML, строки являются динамическими и состоят из полей ввода, ItemName - это автозаполнение, поэтому, когда я выбираю любое имя элемента и фокусируюсь, я получаю соответствующее значение этого элемента и заполнение их в других полях ввода
После выбора ItemName я переключаю свое внимание на pur. rate, затем UnitQty после, а затем Disc% между ними, происходят некоторые вычисления и, наконец, когда я нажимаю Enter на Disc%, я создаю новую строку, и все то же самое для новой строки, рабочий процесс такой же

В чем моя проблема

Как и при выполнении описанного выше процесса, предположим, что для раскрывающегося списка выбран вариант Supplier 1, я делал все это, но затем я понимаю, что должен сделать это для другого поставщика, то есть здесь это Supplier 2, поэтому при выборе Supplier 2 я удаляю tbody и tfoot и создаю свежий
Таким образом, после изменения раскрывающегося списка создается новая строка, и она должна работать так же, как указано выше, но что происходит для 1-й строки, она принимает правильные данные, но когда на Disc% я нажимаю ввод, чтобы создать новую строку, она создает новую строку, но ItemName берет другие данные поставщика, например supplier 2 принимает supplier 1 данные во второй строке

Пожалуйста, проверьте мой фрагмент, я поставил предупреждение и комментарий, чтобы лучше понять проблему.

```
var CostPrice = "";
var totalAmount = "";
var unitQuantity = 0;
var unitQuantityOnDisc = 0;
var purchaseRateOnDisc = 0;
var purchaseRate = 0;
var totalAmount = "";
var discPercentage = "";
var discAmount = "";
var totalAmountOnDisc = "";
var subTotalOnDisc = 0;
var gstPercentage = "";
var gstAmount = "";
var totalAmountOnGst = "";
var total = 0;
var supplierCode = "";
var totalDiscountAmt = 0;
var totalGstAmt = 0;
var totalUnitQty = 0;
var subtotal = 0;
var totalAfterGrnDisc = 0;
var totalRoundOff = 0;
var totalAfterfreightAmt = 0;
var totalAftercommissionAmt = 0;
var mrpOnDisc = 0;
var tableData = {
  "ALMOND CHBAR~2402": {
    "itemName": "ALMOND CHBAR",
    "itemCode": "2402",
    "costPrice": 20.0,
    "gstPercentage": 14.5,
    "mrp": 30.0
  },
  "A BR SB EX~333": {
    "itemName": "A BR SB EX",
    "itemCode": "333",
    "costPrice": 1.0,
    "gstPercentage": 0.0,
    "mrp": 1.0
  }
}

var tableData1 = {
  "White rice~1001": {
    "itemName": "White rice",
    "itemCode": "1001",
    "costPrice": 50.0,
    "gstPercentage": 5,
    "mrp": 65.0
  },
  "Brown rice~333": {
    "itemName": "Brown rice",
    "itemCode": "1002",
    "costPrice": 90,
    "gstPercentage": 5.0,
    "mrp": 110
  }
}


$("#supplierInput").on("change", function(e) {
  $("tbody").empty();
  $("tfoot").empty();

  if (this.value == 'Supplier 1') {
    populateData(tableData)


  } else {
    populateData(tableData1)



  }

});

function populateData(data) {
  var autoCompleteData = Object.keys(data);

  function rowappend(tbody) {
    const markup =
      `<tr>
						  <td>
						    <input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
						  </td>
						  <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly"></td>
						  <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly"></td>
						  <td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
						  <td>
						    <input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
						  </td>
			               			 
						  <td>
						    <input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" >
						  </td>
						  <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly"></td> 
						  <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly"></td>
						  <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly"></td>
						  <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly"></td>
						  <td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn"></i></td>
						  
						</tr>`

    $(tbody).append(markup);
    setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);

    $("[name=itemNametd]", tbody).last().autocomplete({
      source: autoCompleteData
    }).data('tableData', data); // <----   added...
  }

  function rowappendTfoot(tfoot) {

    const tfootmarkup =
      `<tr>
		<td id="itemNametf" class="commantf" align="center">Total ->
		</td>
		<td id="itemCodetf" class="commantf"></td>
		<td id="mrptf" class="commantd"></td>
		<td id="purRatetf" class="commantf"></td>
		<td id="unitQtytf" class="commantf"></td>
		<td id="discPercentagetf" class="commantf"></td>
		<td id="discAmttf" class="commantf"></td>
		<td id="gstPercentagetf" class="commantf"></td>
		<td id="gstAmttf" class="commantf"></td>
		<td id="totalAmttf" class="commantf"></td>
		<td id="crossBtntf" class="commantf"></td>
	</tr>`

    $(tfoot).append(tfootmarkup);

  }


  rowappend($('tbody', '#tableInvoice'))
  rowappendTfoot($('tfoot', '#tfootTable'))


  function getValues(row) {
    const search = ($('[name=itemNametd]', row).val()).toString()
    console.log("search  : " + search);
    var data = $('[name=itemNametd]', row).data('tableData'); // <--- added
    const value = data[search]; // this one is causing issue
    CostPrice = value.costPrice;

    if (value) {
      $(row).find("[name=itemCodetd]").val(value.itemCode);
      $(row).find("[name=mrptd]").val(value.mrp);
      $(row).find("[name=purRatetd]").val(CostPrice);

      $(row).find("[name=gstPercentagetd]").val(value.gstPercentage);
    }
  }

  function calc(row) {
    unitQuantity = $(row).find("[name=unitQtytd]").val() || '0';
    purchaseRate = $(row).find("[name=purRatetd]").val() || '0';
    var mrp = $(row).find("[name=mrptd]").text() || '0';
    totalAmount = (parseFloat(unitQuantity) * parseFloat(purchaseRate));

    $(row).find("[name=totalAmttd]").val((totalAmount));

  }

  function calcDiscount(row) {
    unitQuantityOnDisc = $(row).find("[name=unitQtytd]").val() || '0';
    purchaseRateOnDisc = $(row).find("[name=purRatetd]").val() || '0';
    mrpOnDisc = $(row).find("[name=mrptd]").val() || '0';
    subTotalOnDisc = (parseFloat(unitQuantityOnDisc) * parseFloat(purchaseRateOnDisc));
    discPercentage = $(row).find("[name=discPercentagetd]").val() || '0';
    gstPercentage = $(row).find("[name=gstPercentagetd]").val() || '0';

    discAmount = (parseFloat(discPercentage) / 100) * parseFloat(totalAmount);
    totalAmountOnDisc = (parseFloat(totalAmount) - parseFloat(discAmount))
    gstAmount = (parseFloat(gstPercentage) / 100) * parseFloat(totalAmountOnDisc);
    totalAmountOnGst = (parseFloat(totalAmountOnDisc) + parseFloat(gstAmount))
    total += parseFloat(totalAmountOnGst);
    totalDiscountAmt += parseFloat(discAmount);
    totalGstAmt += parseFloat(gstAmount);
    totalUnitQty += parseFloat(unitQuantity);
    subtotal += parseFloat(subTotalOnDisc);
    totalRoundOff = total - Math.round(total);


    $(row).find("[name=discAmttd]").val((discAmount));
    $(row).find("[name=gstAmttd]").val((gstAmount));
    $(row).find("[name=totalAmttd]").val((totalAmountOnGst));

    $("#unitQtytf").text((totalUnitQty));
    $("#discAmttf").text((totalDiscountAmt));
    $("#gstAmttf").text((totalGstAmt));
    $("#netAmtInput").val((total));
    $("#totalAmttf").text((total));
    $("#subTotalInput").val((subtotal));
    $("#itemAmtDiscinput").val((totalDiscountAmt));
    $("#taxAmtInput").val((totalGstAmt));
    //	  $("#roundOffAmtInput").val(format(totalRoundOff));


  }

  $(document).on('focusout', function(e) {
    const row = e.target.parentElement.parentElement
    if (e.target.matches("[name=itemNametd]")) {
      getValues(e.target.parentElement.parentElement)
      $("[name=purRatetd]").focus();
    }
  });


  $(document).keypress(function(event) { // here I am trying to create new row when enter is clicked
    const row = event.target.parentElement.parentElement
    if (event.target.matches('[name=discPercentagetd]')) {
      var keycode = event.keyCode || event.which;
      if (keycode == '13') {
        alert("presed")
        calcDiscount(event.target.parentElement.parentElement)
        if ($(row).parent().find('tr').length - $(row).index() === 1) {
          rowappend(event.target.parentElement.parentElement.parentElement)

          total = 0;
          totalDiscountAmt = 0;
          totalGstAmt = 0;
          totalUnitQty = 0;
          subtotal = 0;

          $("#tableInvoice tbody tr").each(function() {
            calc(this)
            calcDiscount(this)
          })
        }
      }
    }





  });
  document.addEventListener("keydown", function(e) {

    const row = e.target.parentElement.parentElement
    if (event.target.matches('[name=discPercentagetd]') || e.target.matches('[name=unitQtytd]')) {

      var keycode = e.keyCode || event.e;
      if (keycode == '9') {


        if (!$(event.target).val()) {
          e.preventDefault();
          return;
        }


        total = 0;
        totalDiscountAmt = 0;
        totalGstAmt = 0;
        totalUnitQty = 0;
        subtotal = 0;

        $("#tableInvoice tbody tr").each(function() {
          calc(this)
          calcDiscount(this)
        })


      }

    }


  });
  $("#clear").click(function(e) {


    $("tbody").empty();
    $("tfoot").empty();
    $('#supplierInput option').prop('selected', function() {
      return this.defaultSelected;
    });
  });


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container commonDivInvoice">
  <div class="form-row">

    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
      <label for="supplierInput">Supplier</label>
      <select name="supplierInput" id="supplierInput" class="form-control">
        <option disabled="disabled" selected="true">select supplier
        </option>
        <option>Supplier 1</option>
        <option>Supplier 2</option>

      </select>
    </div>





  </div>
  <div class="row tableInvoice" id="commonDvScroll">
    <table class="table table-bordered" id="tableInvoice">
      <thead>
        <tr>
          <th id="itemNameth" class="commanth">Item Name</th>
          <th id="itemCodeth" class="commanth">Code</th>
          <th id="mrpth" class="commanth">Mrp</th>
          <th id="purRateth" class="commanth">Pur.Rate</th>
          <th id="unitQtyth" class="commanth">Unit Qty</th>
          <th id="discPercentageth" class="commanth">Disc%</th>
          <th id="discAmtth" class="commanth">Disc Amt</th>
          <th id="gstPercentageth" class="commanth">Gst%</th>
          <th id="gstAmtth" class="commanth">Gst Amt</th>
          <th id="totalAmtth" class="commanth">Total Amount</th>

        </tr>
      </thead>
      <tbody>

      </tbody>

    </table>

  </div>
  <div class="row">
    <table class="table table-bordered" id="tfootTable">
      <tfoot>


      </tfoot>
    </table>
  </div>
  <button type="button" class="commonButton" id="clear">
			<i class="fa fa-eraser"></i> Clear
		</button>
</div>

Вот мой динамический код для людей, которые его неправильно понимают

Для заполнения поставщика Select option

$.ajax({
        'url': 'SupplierName', 
        'method' : "GET",
        'dataType' : "json",
        'contentType': "application/json; charset=utf-8",
        'success': function(SupplierNamedata){
            let dropdown = $('#supplierInput');
            dropdown.empty();
            dropdown.append('<option selected="true" disabled>Select Supplier</option>');
            dropdown.prop('selectedIndex', 0);
          $.each(SupplierNamedata, function (key, entry) {
            dropdown.append($('<option></option>').attr('value', entry.SupplierCode).text(entry.SupplierName));
        });

        },
        'error': function(err){ 

        } 
    });

Итак, как только поставщик заполнен, я выбираю его из раскрывающегося списка и вызываю ajax, как показано ниже.

 $("#supplierInput").on("change", function(e) { 

                var supplierInvNo = $("#supplierInvNoInput").val();
                 $('#grnReceivingForm input[type="text"]').val('');
                 $('#grnReceivingForm input[type="tel"]').val('0.00');                              
                 $("tbody").empty();
                 $("tfoot").empty();

                supplierCode = this.value                   
                $.ajax({

                    url: "dataToPopulate",
                    method: "GET",
                    dataType: "json",
                    data: {
                        supplierCode : supplierCode  // sending supplier code
                    },
                    contentType: "application/json; charset=utf-8",
                    success: function(tabledata) { 

                            $("#tfootTable").show();
                            populateData(tabledata)
                          },
                   });

`` Таким образом, в приведенном выше коде то, что я делаю динамически, сначала заполняет параметр выбора drop-down именем поставщика, чем при смене поставщика я вызываю данные из бэкэнда для этого поставщика, и это tabledata обновляется каждый раз, когда поставщик меняется

02.07.2019

Предполагается, что в таблице может быть более 1 типа поставщиков. Например, может ли строка 1 быть поставщиком 2, а строка 2 - поставщиком 1? 03.07.2019
@JonP нет, это то, что я хочу удалить, когда пользователь меняет поставщика, я удаляю / очищаю строку предыдущего поставщика и хочу создать новую новую 03.07.2019
Строка @JonP может быть основана только на выборе одного поставщика, при смене поставщика tbody будет пустым, и пользователь создаст новые строки для выбранного поставщика 03.07.2019
По сути, вам нужно любое количество строк в таблице, и вы выбираете это раскрывающееся меню. все строки будут удалены, и следует добавить новую. Правильно?? 05.07.2019
Да, добавьте новый, а также новая строка должна принимать новые данные, понимаете? 05.07.2019
Ага! прямо сейчас его статическое использование if else. 05.07.2019
просто не оценивайте значения, как в json Object, который у вас есть. 05.07.2019
@RAVIPATEL static, я не могу использовать, потому что имена поставщиков динамические, поэтому невозможно написать, если еще 05.07.2019

Ответы:

Обновление:
Проблема заключалась в том, что вы поместили функцию rowappend внутри функции populateData. Это заставляло всегда заполнять первый объект таблицы каждый раз, когда вы добавляли строку. Пожалуйста, проверьте мой обновленный фрагмент текста и запустите его. Вы увидите, как это работает.

Пожалуйста, проверьте мой обновленный фрагмент кода. Здесь я пытаюсь имитировать ответ на вызов AJAX, возвращая объект. Сравните мой код с исходным кодом, чтобы понять изменения:

        <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
            <label for="supplierInput">Supplier</label>
            <select name="supplierInput" id="supplierInput" class="form-control">
                <option disabled="disabled" selected="true">select supplier
                </option>
                <option>Supplier 1</option>
                <option>Supplier 2</option>

            </select>
        </div>





    </div>
    <div class="row tableInvoice" id="commonDvScroll">
        <table class="table table-bordered" id="tableInvoice">
            <thead>
                <tr>
                    <th id="itemNameth" class="commanth">Item Name</th>
                    <th id="itemCodeth" class="commanth">Code</th>
                    <th id="mrpth" class="commanth">Mrp</th>
                    <th id="purRateth" class="commanth">Pur.Rate</th>
                    <th id="unitQtyth" class="commanth">Unit Qty</th>
                    <th id="discPercentageth" class="commanth">Disc%</th>
                    <th id="discAmtth" class="commanth">Disc Amt</th>
                    <th id="gstPercentageth" class="commanth">Gst%</th>
                    <th id="gstAmtth" class="commanth">Gst Amt</th>
                    <th id="totalAmtth" class="commanth">Total Amount</th>

                </tr>
            </thead>
            <tbody>

            </tbody>

        </table>

    </div>
    <div class="row">
        <table class="table table-bordered" id="tfootTable">
            <tfoot>


            </tfoot>
        </table>
    </div>
    <button type="button" class="commonButton" id="clear">
        <i class="fa fa-eraser"></i> Clear
    </button>
</div>
<script>
    var CostPrice = "";
    var totalAmount = "";
    var unitQuantity = 0;
    var unitQuantityOnDisc = 0;
    var purchaseRateOnDisc = 0;
    var purchaseRate = 0;
    var totalAmount = "";
    var discPercentage = "";
    var discAmount = "";
    var totalAmountOnDisc = "";
    var subTotalOnDisc = 0;
    var gstPercentage = "";
    var gstAmount = "";
    var totalAmountOnGst = "";
    var total = 0;
    var supplierCode = "";
    var totalDiscountAmt = 0;
    var totalGstAmt = 0;
    var totalUnitQty = 0;
    var subtotal = 0;
    var totalAfterGrnDisc = 0;
    var totalRoundOff = 0;
    var totalAfterfreightAmt = 0;
    var totalAftercommissionAmt = 0;
    var mrpOnDisc = 0;
    var tableData = {};

    // ---- This block is to mimic jQuery API call response. I am using your own data ---- //

    sellersList = [
        {
            "SupplierCode": "0001",
            "SupplierName": "Amazon"
        },
        {
            "SupplierCode": "0002",
            "SupplierName": "FlipKart"
        },
        {
            "SupplierCode": "0003",
            "SupplierName": "eBay"
        }
    ];

    listOfItemsBySellerCode = {
        "0001" : {
            "ALMOND CHBAR" : {
                "itemName": "ALMOND CHBAR",
                "itemCode": "2402",
                "costPrice": 20.0,
                "gstPercentage": 14.5,
                "mrp": 30.0
            },
            "A BR SB EX~333" : {
                "itemName": "A BR SB EX~333",
                "itemCode": "333",
                "costPrice": 1.0,
                "gstPercentage": 0.0,
                "mrp": 20.0
            }
        },
        "0002" : {
            "iPhone SE": {
                "itemName": "iPhone SE",
                "itemCode": "2001",
                "costPrice": 15700.0,
                "gstPercentage": 14.5,
                "mrp": 20000.0
            },
            "Remi Note 5": {
                "itemName": "Remi Note 5",
                "itemCode": "2095",
                "costPrice": 25000.0,
                "gstPercentage": 13.0,
                "mrp": 28745.0
            }
        },
        "0003" : {
            "Levi's Jeans": {
                "itemName": "Levi's Jeans",
                "itemCode": "1309",
                "costPrice": 3750.0,
                "gstPercentage": 14.5,
                "mrp": 4120.0
            },
            "Fastrack M135": {
                "itemName": "Fastrack M135",
                "itemCode": "3401",
                "costPrice": 6789.0,
                "gstPercentage": 9.06,
                "mrp": 7459.0
            }
        }

    }

    function ajax_response_for_sellers_list (response) {
        return function (params) {
            params.success(sellersList);
        };
    }

    function ajax_response_for_items_sold_by_seller (response) {
        return function (params) {
            params.success(listOfItemsBySellerCode[params.data.supplierCode])
        }
    }

    // ****** Custom API response block ends here ******* //


    // Populate Supplier select options

    // Here I'm telling $.ajax to return with the seller data which I already have in my variable (for now). This way I don't even need to fire the API. 
    // But you can assume your API will respond in this JSON structure
    $.ajax = ajax_response_for_sellers_list();

    $.ajax({
        'url': '/mockAPI/to/get/suppliersData',
        'method': "GET",
        'dataType': "json",
        'contentType': "application/json; charset=utf-8",
        'success': function (response) {
            console.log('Our Mock API responding with list of all sellers : ')
            console.log(response);

            let dropdown = $('#supplierInput');
            dropdown.empty();
            dropdown.append('<option selected="true" disabled>Select Supplier</option>');
            dropdown.prop('selectedIndex', 0);
            $.each(response, function (key, entry) {
                dropdown.append($('<option></option>').attr('value', entry.SupplierCode).text(entry.SupplierName));
            });

        },
        'error': function (err) {

        }
    });

    // Here I'm telling $.ajax to return all items sold by a seller (seller is identified by code)
    // You can assume your API will respond in this JSON structure
    $.ajax = ajax_response_for_items_sold_by_seller();

    $("#supplierInput").on("change", function (e) {
        var supplierInvNo = $("#supplierInvNoInput").val();
        $('#grnReceivingForm input[type="text"]').val('');
        $('#grnReceivingForm input[type="tel"]').val('0.00');
        $("tbody").empty();
        $("tfoot").empty();

        supplierCode = jQuery(this).find(":selected").val();
        $('.loader').show();
        $('.overlay').show();
        $.ajax({

            url: "/mockAPI/to/get/items/based/on/sellercode",
            method: "POST",
            dataType: "json",
            data: {
                supplierCode: supplierCode  // sending supplier code
            },
            contentType: "application/json; charset=utf-8",
            success: function (response) {

                console.log('Our Mock API responding with all items sold by the selected seller : ', supplierCode)
                console.log(response);

                $("#tfootTable").show();
                populateData(response)
            },
        });
    });

    function rowappend(tbody) {
        const markup =
            `<tr>
                <td>
                    <input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
                </td>
                <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly"></td>
                <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly"></td>
                <td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
                <td>
                    <input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
                </td>

                <td>
                    <input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" >
                </td>
                <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly"></td> 
                <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly"></td>
                <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly"></td>
                <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly"></td>
                <td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn"></i></td>

            </tr>`

        $(tbody).append(markup);
        setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);

        // Bind autocomplete data
        var autoCompleteData = Object.keys(tableData);
        $("[name=itemNametd]", $('tbody', '#tableInvoice')).last().autocomplete({
            source: autoCompleteData
        }).data('tableData', tableData); // <----   added...
    }

    function getValues(row) {
        const search = ($('[name=itemNametd]', row).val()).toString()
        console.log("search  : " + search);
        var data = $('[name=itemNametd]', row).data('tableData'); // <--- added
        const value = data[search]; // this one is causing issue

        // Check first if the user is selecting an `existing` data object
        if (value) {
            CostPrice = value.costPrice;

            if (value) {
                $(row).find("[name=itemCodetd]").val(value.itemCode);
                $(row).find("[name=mrptd]").val(value.mrp);
                $(row).find("[name=purRatetd]").val(CostPrice);

                $(row).find("[name=gstPercentagetd]").val(value.gstPercentage);
            }
        }
    }

    function calc(row) {
        unitQuantity = $(row).find("[name=unitQtytd]").val() || '0';
        purchaseRate = $(row).find("[name=purRatetd]").val() || '0';
        var mrp = $(row).find("[name=mrptd]").text() || '0';
        totalAmount = (parseFloat(unitQuantity) * parseFloat(purchaseRate));

        $(row).find("[name=totalAmttd]").val((totalAmount));

    }

    function calcDiscount(row) {
        unitQuantityOnDisc = $(row).find("[name=unitQtytd]").val() || '0';
        purchaseRateOnDisc = $(row).find("[name=purRatetd]").val() || '0';
        mrpOnDisc = $(row).find("[name=mrptd]").val() || '0';
        subTotalOnDisc = (parseFloat(unitQuantityOnDisc) * parseFloat(purchaseRateOnDisc));
        discPercentage = $(row).find("[name=discPercentagetd]").val() || '0';
        gstPercentage = $(row).find("[name=gstPercentagetd]").val() || '0';

        discAmount = (parseFloat(discPercentage) / 100) * parseFloat(totalAmount);
        totalAmountOnDisc = (parseFloat(totalAmount) - parseFloat(discAmount))
        gstAmount = (parseFloat(gstPercentage) / 100) * parseFloat(totalAmountOnDisc);
        totalAmountOnGst = (parseFloat(totalAmountOnDisc) + parseFloat(gstAmount))
        total += parseFloat(totalAmountOnGst);
        totalDiscountAmt += parseFloat(discAmount);
        totalGstAmt += parseFloat(gstAmount);
        totalUnitQty += parseFloat(unitQuantity);
        subtotal += parseFloat(subTotalOnDisc);
        totalRoundOff = total - Math.round(total);


        $(row).find("[name=discAmttd]").val((discAmount));
        $(row).find("[name=gstAmttd]").val((gstAmount));
        $(row).find("[name=totalAmttd]").val((totalAmountOnGst));

        $("#unitQtytf").text((totalUnitQty));
        $("#discAmttf").text((totalDiscountAmt));
        $("#gstAmttf").text((totalGstAmt));
        $("#netAmtInput").val((total));
        $("#totalAmttf").text((total));
        $("#subTotalInput").val((subtotal));
        $("#itemAmtDiscinput").val((totalDiscountAmt));
        $("#taxAmtInput").val((totalGstAmt));
        //    $("#roundOffAmtInput").val(format(totalRoundOff));


    }

    $(document).on('focusout', '[name=itemNametd]', function (e) {
        var row = jQuery(this).parent().parent();

        // Get row values
        getValues(row);

        // Focus next
        console.log('focusing next', row.find("[name=purRatetd]").length);
        row.find("[name=purRatetd]").focus();
    });


    $(document).keypress(function (event) { // here I am trying to create new row when enter is clicked
        const row = event.target.parentElement.parentElement
        if (event.target.matches('[name=discPercentagetd]')) {
            var keycode = event.keyCode || event.which;
            if (keycode == '13') {
                alert("presed")
                calcDiscount(event.target.parentElement.parentElement)
                if ($(row).parent().find('tr').length - $(row).index() === 1) {
                    rowappend(event.target.parentElement.parentElement.parentElement)

                    total = 0;
                    totalDiscountAmt = 0;
                    totalGstAmt = 0;
                    totalUnitQty = 0;
                    subtotal = 0;

                    $("#tableInvoice tbody tr").each(function () {
                        calc(this)
                        calcDiscount(this)
                    })
                }
            }
        }





    });
    document.addEventListener("keydown", function (e) {

        const row = e.target.parentElement.parentElement
        if (event.target.matches('[name=discPercentagetd]') || e.target.matches('[name=unitQtytd]')) {

            var keycode = e.keyCode || event.e;
            if (keycode == '9') {


                if (!$(event.target).val()) {
                    e.preventDefault();
                    return;
                }


                total = 0;
                totalDiscountAmt = 0;
                totalGstAmt = 0;
                totalUnitQty = 0;
                subtotal = 0;

                $("#tableInvoice tbody tr").each(function () {
                    calc(this)
                    calcDiscount(this)
                })


            }

        }


    });
    $("#clear").click(function (e) {
        $("tbody").empty();
        $("tfoot").empty();
        $('#supplierInput option').prop('selected', function () {
            return this.defaultSelected;
        });
    });

    function rowappendTfoot(tfoot) {

        const tfootmarkup =
            `<tr>
            <td id="itemNametf" class="commantf" align="center">Total ->
            </td>
            <td id="itemCodetf" class="commantf"></td>
            <td id="mrptf" class="commantd"></td>
            <td id="purRatetf" class="commantf"></td>
            <td id="unitQtytf" class="commantf"></td>
            <td id="discPercentagetf" class="commantf"></td>
            <td id="discAmttf" class="commantf"></td>
            <td id="gstPercentagetf" class="commantf"></td>
            <td id="gstAmttf" class="commantf"></td>
            <td id="totalAmttf" class="commantf"></td>
            <td id="crossBtntf" class="commantf"></td>
        </tr>`

        $(tfoot).append(tfootmarkup);

    }

    function populateData(data) {
        tableData = Object.assign({}, data);
        var autoCompleteData = Object.keys(data);
        rowappend($('tbody', '#tableInvoice'));
        rowappendTfoot($('tfoot', '#tfootTable'))
    }
</script>

04.07.2019

Нет, такая же проблема, попробуйте этот способ 1: - выберите supplier 1 создать одну строку, затем снова строку 2, 2: - выберите supplier 2, две созданные выше строки будут удалены, затем создать новую строку, и когда вы снова создадите новую строку для supplier 2, автозаполнение не отображается вместо показа supplier 2 данных он снова показывает supplier 1 данные 04.07.2019

Понятно. Дай мне проверить. 04.07.2019

@manishthakur Пожалуйста, запустите мой фрагмент еще раз. Он должен работать отлично в соответствии с вашими требованиями. 04.07.2019

эй, этот подход не в порядке, так как я отредактировал свой пост, поскольку вы можете видеть, что есть только одни данные, то есть tableData, поскольку вы можете проверить мой ajax, когда пользователь меняет поставщика, я вызываю данные через ajax из бэкэнда в соответствии с выбранным поставщиком, здесь для лучшего понимание, что я определил tabledata1 и tableData, но я думаю, вы, ребята, ошибаетесь, предположим, у меня 30 поставщиков, так что бы я делал, если бы я сделал 30, если еще, даже эти номера поставщиков являются динамическими 04.07.2019

В вашем фрагменте вы не добавили рабочий код вызова ajax. Пожалуйста, добавьте код jsFiddle, с которым я могу работать. Я уже много времени уделял этому вопросу. 04.07.2019

Как я могу добавить рабочий ajax Я добавил вызов ajax, но он не будет отображать данные, потому что я запускаю его в своей локальной системе, пожалуйста, проверьте мое редактирование моего сообщения tableData в боковой функции успеха динамически при изменении раскрывающегося списка 04.07.2019

Я думаю, что очень часто понимают, что раскрывающееся поле не будет иметь только два варианта, при изменении этого я вызываю tableData 04.07.2019

Хорошо. Позвольте мне когда-нибудь. Я вернусь к вам. 04.07.2019

Нет проблем, вы можете не торопиться 04.07.2019

Давайте продолжим это обсуждение в чате. 04.07.2019

эй, я сказал вам, что поставщик здесь не статичен, например, я взял поставщика 1 и поставщика 2, но в моем динамическом коде я загружаю его из базы данных, это может быть что угодно 05.07.2019

Проблема заключалась в том, что объект данных использовался глобально повсюду. что может быть обработано путем повторной выборки объекта на основе выбранного раскрывающегося списка во время выполнения.

Пожалуйста, проверьте код ниже

    var CostPrice = "";
    var totalAmount = "";
    var unitQuantity = 0;
    var unitQuantityOnDisc = 0;
    var purchaseRateOnDisc = 0;
    var purchaseRate = 0;
    var totalAmount = "";
    var discPercentage = "";
    var discAmount = "";
    var totalAmountOnDisc = "";
    var subTotalOnDisc = 0;
    var gstPercentage = "";
    var gstAmount = "";
    var totalAmountOnGst = "";
    var total = 0;
    var supplierCode = "";
    var totalDiscountAmt = 0;
    var totalGstAmt = 0;
    var totalUnitQty = 0;
    var subtotal = 0;
    var totalAfterGrnDisc = 0;
    var totalRoundOff = 0;
    var totalAfterfreightAmt = 0;
    var totalAftercommissionAmt = 0;
    var mrpOnDisc = 0;
    var tableData = {
      "ALMOND CHBAR~2402": {
        "itemName": "ALMOND CHBAR",
        "itemCode": "2402",
        "costPrice": 20.0,
        "gstPercentage": 14.5,
        "mrp": 30.0
      },
      "A BR SB EX~333": {
        "itemName": "A BR SB EX",
        "itemCode": "333",
        "costPrice": 1.0,
        "gstPercentage": 0.0,
        "mrp": 1.0
      }
    }

    var tableData1 = {
      "White rice~1001": {
        "itemName": "White rice",
        "itemCode": "1001",
        "costPrice": 50.0,
        "gstPercentage": 5,
        "mrp": 65.0
      },
      "Brown rice~333": {
        "itemName": "Brown rice",
        "itemCode": "1002",
        "costPrice": 90,
        "gstPercentage": 5.0,
        "mrp": 110
      }
    }

    var tableDataGlob = ''; //global object
    $("#supplierInput").on("change", function (e) {
      $("tbody").empty();
      $("tfoot").empty();
      if (this.value == 'Supplier 1') {
        tableDataGlob = tableData;
        populateData(tableDataGlob)
      } else {
        tableDataGlob = tableData1;
        populateData(tableDataGlob)
      }
    });


    function populateData(data) {

      function rowappend(tbody) {
        const markup =
          `<tr>
                  <td>
                    <input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
                  </td>
                  <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly"></td>
                  <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly"></td>
                  <td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
                  <td>
                    <input type="tel" id="unitQtytd"class="form-control commanChange unitQtytd" name="unitQtytd">
                  </td>
                              
                  <td>
                    <input type="tel" id="discPercentagetd" class="form-control commanChange discPercentagetd" name="discPercentagetd" >
                  </td>
                  <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly"></td> 
                  <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly"></td>
                  <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly"></td>
                  <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly"></td>
                  <td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn"></i></td>
                  
                </tr>`

        $(tbody).append(markup);
        setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);
        // Fetch Data on basis of dynamic Selected option 
        // Previously the code was declaring global var 2019-07-04 15:24:28
        var autoCompleteData = Object.keys(tableDataGlob);
      

        console.log(autoCompleteData);
        console.log($("[name=itemNametd]", tbody).last());
        $("[name=itemNametd]", tbody).last().autocomplete({
          source: autoCompleteData
        }).data('tableData', data); // <----   added...

      }

      function rowappendTfoot(tfoot) {

        const tfootmarkup =
          `<tr>
        <td id="itemNametf" class="commantf" align="center">Total ->
        </td>
        <td id="itemCodetf" class="commantf"></td>
        <td id="mrptf" class="commantd"></td>
        <td id="purRatetf" class="commantf"></td>
        <td id="unitQtytf" class="commantf"></td>
        <td id="discPercentagetf" class="commantf"></td>
        <td id="discAmttf" class="commantf"></td>
        <td id="gstPercentagetf" class="commantf"></td>
        <td id="gstAmttf" class="commantf"></td>
        <td id="totalAmttf" class="commantf"></td>
        <td id="crossBtntf" class="commantf"></td>
      </tr>`

        $(tfoot).append(tfootmarkup);

      }


      rowappend($('tbody', '#tableInvoice'))
      rowappendTfoot($('tfoot', '#tfootTable'))


      function getValues(row) {
        const search = ($('[name=itemNametd]', row).val()).toString()
        console.log("search  : " + search);
        
        var data = tableDataGlob;
        console.log(tableDataGlob);
    
        const value = data[search]; // this one is causing issue
        CostPrice = value.costPrice;

        if (value) {
          $(row).find("[name=itemCodetd]").val(value.itemCode);
          $(row).find("[name=mrptd]").val(value.mrp);
          $(row).find("[name=purRatetd]").val(CostPrice);

          $(row).find("[name=gstPercentagetd]").val(value.gstPercentage);
        }
      }

      function calc(row) {
        console.log(row)
        unitQuantity = $(row).find("[name=unitQtytd]").val() || '0';
        purchaseRate = $(row).find("[name=purRatetd]").val() || '0';
        var mrp = $(row).find("[name=mrptd]").text() || '0';
        totalAmount = (parseFloat(unitQuantity) * parseFloat(purchaseRate));

        $(row).find("[name=totalAmttd]").val((totalAmount));

      }

      function calcDiscount(row) {
        unitQuantityOnDisc = $(row).find("[name=unitQtytd]").val() || '0';
        purchaseRateOnDisc = $(row).find("[name=purRatetd]").val() || '0';
        mrpOnDisc = $(row).find("[name=mrptd]").val() || '0';
        subTotalOnDisc = (parseFloat(unitQuantityOnDisc) * parseFloat(purchaseRateOnDisc));
        discPercentage = $(row).find("[name=discPercentagetd]").val() || '0';
        gstPercentage = $(row).find("[name=gstPercentagetd]").val() || '0';

        discAmount = (parseFloat(discPercentage) / 100) * parseFloat(totalAmount);
        totalAmountOnDisc = (parseFloat(totalAmount) - parseFloat(discAmount))
        gstAmount = (parseFloat(gstPercentage) / 100) * parseFloat(totalAmountOnDisc);
        totalAmountOnGst = (parseFloat(totalAmountOnDisc) + parseFloat(gstAmount))
        total += parseFloat(totalAmountOnGst);
        totalDiscountAmt += parseFloat(discAmount);
        totalGstAmt += parseFloat(gstAmount);
        totalUnitQty += parseFloat(unitQuantity);
        subtotal += parseFloat(subTotalOnDisc);
        totalRoundOff = total - Math.round(total);


        $(row).find("[name=discAmttd]").val((discAmount));
        $(row).find("[name=gstAmttd]").val((gstAmount));
        $(row).find("[name=totalAmttd]").val((totalAmountOnGst));

        $("#unitQtytf").text((totalUnitQty));
        $("#discAmttf").text((totalDiscountAmt));
        $("#gstAmttf").text((totalGstAmt));
        $("#netAmtInput").val((total));
        $("#totalAmttf").text((total));
        $("#subTotalInput").val((subtotal));
        $("#itemAmtDiscinput").val((totalDiscountAmt));
        $("#taxAmtInput").val((totalGstAmt));
        //	  $("#roundOffAmtInput").val(format(totalRoundOff));


      }

      $(document).on('focusout', function (e) {
        const row = e.target.parentElement.parentElement
        if (e.target.matches("[name=itemNametd]")) {
          console.log(e.target.parentElement.parentElement);
          getValues(e.target.parentElement.parentElement)
          $("[name=purRatetd]").focus();
        }
      });

      // $('.discPercentagetd').unbind();
      
      $('body').on('keypress','.discPercentagetd',function (event) { // here I am trying to create new row when enter is clicked
        const row = event.target.parentElement.parentElement
        if (event.target.matches('[name=discPercentagetd]')) {
          var keycode = event.keyCode || event.which;
          console.log(keycode);
          if (keycode == '13') {
            alert("presed")
            calcDiscount(event.target.parentElement.parentElement)
            if ($(row).parent().find('tr').length - $(row).index() === 1) {
              rowappend(event.target.parentElement.parentElement.parentElement)

              total = 0;
              totalDiscountAmt = 0;
              totalGstAmt = 0;
              totalUnitQty = 0;
              subtotal = 0;

              $("#tableInvoice tbody tr").each(function () {
                calc(this)
                calcDiscount(this)
              })
            }
          }
        }


      });


      $('body').on('keypress','.discPercentagetd,.unitQtytd', function (e) {

        const row = e.target.parentElement.parentElement
        if (event.target.matches('[name=discPercentagetd]') || e.target.matches('[name=unitQtytd]')) {

          var keycode = e.keyCode || event.e;
          if (keycode == '9') {


            if (!$(event.target).val()) {
              e.preventDefault();
              return;
            }


            total = 0;
            totalDiscountAmt = 0;
            totalGstAmt = 0;
            totalUnitQty = 0;
            subtotal = 0;

            $("#tableInvoice tbody tr").each(function () {
              calc(this)
              calcDiscount(this)
            })


          }

        }


      });

      $("#clear").unbind();
      $("#clear").click(function (e) {


        $("tbody").empty();
        $("tfoot").empty();
        $('#supplierInput option').prop('selected', function () {
          return this.defaultSelected;
        });
      });

    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <div class="container commonDivInvoice">
      <div class="form-row">

        <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
          <label for="supplierInput">Supplier</label>
          <select name="supplierInput" id="supplierInput" class="form-control">
            <option disabled="disabled" selected="true">select supplier
            </option>
            <option>Supplier 1</option>
            <option>Supplier 2</option>

          </select>
          <input type="hidden" id="selectedtable" name="" value="">
        </div>





      </div>
      <div class="row tableInvoice" id="commonDvScroll">
        <table class="table table-bordered" id="tableInvoice">
          <thead>
            <tr>
              <th id="itemNameth" class="commanth">Item Name</th>
              <th id="itemCodeth" class="commanth">Code</th>
              <th id="mrpth" class="commanth">Mrp</th>
              <th id="purRateth" class="commanth">Pur.Rate</th>
              <th id="unitQtyth" class="commanth">Unit Qty</th>
              <th id="discPercentageth" class="commanth">Disc%</th>
              <th id="discAmtth" class="commanth">Disc Amt</th>
              <th id="gstPercentageth" class="commanth">Gst%</th>
              <th id="gstAmtth" class="commanth">Gst Amt</th>
              <th id="totalAmtth" class="commanth">Total Amount</th>

            </tr>
          </thead>
          <tbody>

          </tbody>

        </table>

      </div>
      <div class="row">
        <table class="table table-bordered" id="tfootTable">
          <tfoot>


          </tfoot>
        </table>
      </div>
      <button type="button" class="commonButton" id="clear">
          <i class="fa fa-eraser"></i> Clear
        </button>
    </div>

Протестируйте здесь рабочий модуль: https://jsfiddle.net/m4fb038x/

04.07.2019

Привет, здесь if ($('#selectedtable').val().trim() === 'Supplier 1') { var data =tableData; } вы проверяете, если еще, потому что есть два поставщика только в поле выбора, но в моем реальном коде их 10-15 и многие другие, и они динамические, и есть только один объект данных, который tableData, который является динамическим при смене поставщика я вызываю эти данные из моего бэкэнда, которые относятся к выбранному поставщику, поэтому здесь я использую только два данных, то есть tableData и tableData1 и supplier 1 и supplier 2 из-за отображения рабочего фрагмента 04.07.2019

$ (# supplierInput) .on (change, function (e) {$ (tbody) .empty (); $ (tfoot) .empty (); $ ('# selectedtable'). val ($ (# supplierInput) .val) () .trim ()); if ($ (this) .val (). trim () === 'Поставщик 1') {populateData (tableData);} else {populateData (tableData1);}}); // Вносим изменения в событие изменения, подобное этому 04.07.2019

эй, во-первых, зачем это делать var opt_table_Map = { 'Supplier 1' : tableData,'Supplier 2' : tableData1 } Я сказал вам, что данные и поставщики являются динамическими, поэтому не нужно усложнять вещи, и когда я selecting supplier 2 после выбора supplier 1 дважды нажимаю клавишу ввода, почему? 04.07.2019

Как вы собираетесь сопоставить поставщика с табличным объектом данных. Сообщите нам свой динамический код для того же 04.07.2019

Я не понял, почему мне нужно отображать, тогда, когда я выбираю Supplier 1, я создаю строку таблицы, когда я выбираю Supplier 2, я удаляю эту строку и создаю новую с новыми данными через ajax 04.07.2019

@manishthakur У меня твоя проблема. Проверьте мой последний код, проблему можно решить, создав глобальную переменную для tabledata, которая извлекается из ajax. 04.07.2019

@Rishab Предлагаемый ответ не нужен. В коде @manishthakur была ошибка. Он добавил rowappend функцию не в том месте, которое всегда занимало первый объект данных таблицы. Если вы возьмете функцию rowappend вне функции populateData и передадите правильный объект данных таблицы, это решит проблему. 04.07.2019

@manishthakur, вам просто нужно сделать привязку раскрывающегося списка поставщиков и данных автозаполнения, в то время как остальная часть моего кода не будет создавать событие множественного щелчка при нажатии ввода на диске%. 05.07.2019

Новые материалы

Не зря же это называют интеллектом

Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..

LeetCode Проблема 41. Первый пропущенный положительный результат

LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..

Расистский и сексистский робот, обученный в Интернете

Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..

Управление состоянием в микрофронтендах

Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..

Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...

LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..

Структуры данных в C ++ - Часть 1

Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..

Как я опубликовал свое первое приложение в App Store в 13 лет

Как все началось Все началось три года назад летом после моего четвертого класса в начальной школе. Для меня, четвертого класса, лето кажется бесконечным, пока оно не закончится, и мой отец..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Web Development Python Coding Deep Learning React AI Software Engineering Nodejs Development Typescript Data Java NLP Front End Development Computer Science Algorithms Learning Programming Languages ChatGPT Tech Tutorial Reactjs Angular React Native Cybersecurity Productivity Neural Networks Python Programming Javascript Development HTML Javascript Tips Learning To Code Developer