javascript Dynamic HTML table row causing issues

Question

I have a select option on select of which I am creating an HTML table, As I am calling data from back-end on the basis of selected option so created table rows are dynamic

what I am doing is

On change of select option, I am creating HTML table row, the rows are dynamic and are consist of input fields, ItemName is an auto complete so when I am selecting any item name and focusing out I am getting some corresponding value of that item and populating them in other Input fields
After selecting ItemName I am shifting my focus on pur. rate then UnitQty after and then Disc% in between these there are some calculations going on and lastly when I press enter on Disc% I am creating new row and everything is same for new row the working process is same

What is my issue

As doing above process suppose for drop-down selected option Supplier 1 I was doing all that, but then I realize I have to do it for another supplier, i.e. here it is Supplier 2, So on selection of Supplier 2 I am deleting tbody and tfoot and creating fresh one
So after drop-down change new row is created and it should work the same as above, but what's happening is for 1st row it is taking right data, but when on Disc% I press enter to create new row it creates a new row, but ItemName is taking other supplier data like for supplier 2 it is taking supplier 1 data in second row

Please check my snippet I have put alert and comment for better understanding of the issue

```
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 =
      `
						  
						    
						  
						  
						  
						  
						  
						    
						  
			               			 
						  
						    
						  
						   
						  
						  
						  
						  
						  
						`

    $(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 =
      `
		Total ->
		
		
		
		
		
		
		
		
		
		
		
	`

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


}








  

    
      Supplier
      
    





  
  
    
      
        
          Item Name
          Code
          Mrp
          Pur.Rate
          Unit Qty
          Disc%
          Disc Amt
          Gst%
          Gst Amt
          Total Amount

Here is My dynamic Code for the people who are misinterpreting it

To populate supplier 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('');
            dropdown.prop('selectedIndex', 0);
          $.each(SupplierNamedata, function (key, entry) {
            dropdown.append($('').attr('value', entry.SupplierCode).text(entry.SupplierName));
        });

        },
        'error': function(err){ 

        } 
    });

So once supplier is populated I am selecting one from drop down and calling ajax like below

 $("#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)
                          },
                   });

`` So by above code what I am doing dynamically is firstly populating the select option drop-down with supplier name, than on change of supplier I am calling data from backend for that supplier and that tabledata is updating each time when supplier is changed

Furqan Rahamath · Accepted Answer

Update:
The problem was, you placed rowappend function inside populateData function. This was causing always the first table object to be populated every time you add a row. Please check my updated text snippet and run it. You will see it work.

Please check my updated code snippet. Here, I am trying to mimic an AJAX call response by returning back an object. Compare my code with your original code to understand the changes:

        
            Supplier
            
        





    
    
        
            
                
                    Item Name
                    Code
                    Mrp
                    Pur.Rate
                    Unit Qty
                    Disc%
                    Disc Amt
                    Gst%
                    Gst Amt
                    Total Amount

javascript Dynamic HTML table row causing issues

Answers (2)

Related Questions