CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user10705797
user10705797

Reputation:

On click on a button all data resets to 0 in HTML table

I have a Form inside, which consists of 3 buttons and a HTML table, which I am filling dynamically with JSON data.

What I am doing:

I have JSON data for TWO tables with the same structure, that's why I am trying to load the two JSON-Data-Sets into the same table id i.e HourlysalesSummary. Initially it loads with data tableData, then after user clicks on load Draft it loads tableDataDraft. When the page initially loads up I want to show the data-set tableData with Quantity field as 0. Then the user will input something and will be able to save. Furthermore there is one more button save draft, where the user can save the data into dataTableDraft, which I am not including in my code here because it is working fine.

Now what is my issue:

Snippet 

var tableData = [{
    "Item Code": "1000",
    "Item Name": "Coffee-S1",
    "Category Name": "Beverages",
    "Quantity": "0"
  },
  {
    "Item Code": "1001",
    "Item Name": "Coffee-S",
    "Category Name": "Beverages",
    "Quantity": "0"
  },
  {
    "Item Code": "1083",
    "Item Name": "Oma Stick 200gm",
    "Category Name": "Biscuits",
    "Quantity": "0"
  },
  {
    "Item Code": "1387",
    "Item Name": "simple Bhath",
    "Category Name": "Bhath",
    "Quantity": "0"
  },
  {
    "Item Code": "1388",
    "Item Name": "Bakala Bhath",
    "Category Name": "Bhath",
    "Quantity": "0"
  },


  {
    "Item Code": "1389",
    "Item Name": "Bisibelebath",
    "Category Name": "Bhath",
    "Quantity": "0"
  }
]

var tableDataDraft = [{
    "Item Code": "1001",
    "Item Name": "Coffee-S",
    "Category Name": "Beverages",
    "Quantity": "1213.0000"
  },
  {
    "Item Code": "1083",
    "Item Name": "Oma Stick 200gm",
    "Category Name": "Biscuits",
    "Quantity": "1478.0000"
  },
  {
    "Item Code": "1388",
    "Item Name": "Bakala Bhath",
    "Category Name": "Bhath",
    "Quantity": "1478.0000"
  },

  {
    "Item Code": "1389",
    "Item Name": "Bisibelebath",
    "Category Name": "Bhath",
    "Quantity": "2596.0000"
  }
]

$("#loadDraft").click(function() {
  addTableDraft(tableDataDraft);
  $("#edit").show();
})

var itemsQuantiry = [];

function addTableDraft(tableDataDraft) {
  var col = Object.keys(tableDataDraft[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1); // TABLE ROW.
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableDataDraft.length; i++) {
    tr = table.insertRow(-1);
    tr.classList.add("item-row");
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display = "none";
      var tabledata = tableDataDraft[i][col[j]];
      if (tableDataDraft[i]['Item Code'] === tableDataDraft[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableDataDraft[i]['Quantity'] === tableDataDraft[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "right";
        quantityField.setAttribute("name", "Quantity_field");
        quantityField.setAttribute("autocomplete", "on");
        if (itemsQuantiry[i]) {
          quantityField.setAttribute("value", itemsQuantiry[i]);
        } else {
          quantityField.setAttribute("value", tabledata);
        }
        quantityField.setAttribute("index", i);
        quantityField.setAttribute("type", "number");
        quantityField.setAttribute("onfocus", "this.value=''");
        quantityField.setAttribute("required", "required");
        quantityField.classList.add("dataReset");
        quantityField.toLocaleString('en-IN');
        tabCell.appendChild(quantityField);
      }

      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("HourlysalesSummary");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  $(".dataReset").on("change", function(e) {
    itemsQuantiry[$(this).attr('index')] = e.target.value;
  });
}
var itemsQuantiry1 = [];

function addTable(tableData) {
  var col = Object.keys(tableData[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1); // TABLE ROW.
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableData.length; i++) {
    tr = table.insertRow(-1);
    tr.classList.add("item-row");
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display = "none";
      var tabledata = tableData[i][col[j]];
      if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "right";
        quantityField.setAttribute("name", "Quantity_field");
        quantityField.setAttribute("autocomplete", "on");
        if (itemsQuantiry1[i]) {
          quantityField.setAttribute("value", itemsQuantiry1[i]);
        } else {
          quantityField.setAttribute("value", tabledata);
        }
        quantityField.setAttribute("index", i);
        quantityField.setAttribute("type", "number");
        quantityField.setAttribute("onfocus", "this.value=''");
        quantityField.setAttribute("required", "required");
        quantityField.classList.add("dataReset");
        quantityField.toLocaleString('en-IN');
        tabCell.appendChild(quantityField);
      }
      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("HourlysalesSummary");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  $(".dataReset").on("change", function(e) {
    itemsQuantiry1[$(this).attr('index')] = e.target.value;
  });
}
addTable(tableData);

function editData() {
  addTable(tableData)

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container" id="divHide">
  <form id="indentForm" autocomplete="on">
    <div class="row position-relative">
    </div>
    <hr style="border: 1px solid black">
    <div>
      <button type="button" id="save" class="commonButton">
					<i class="fas fa-save"></i>Save
				</button>
      <button type="button" id="edit" class="commonButton" onclick="editData()" style="display:none">
					<i class="fas fa-save"></i>Edit
				</button>
      <button type="button" id="loadDraft" class="commonButton">
					<i class="fas fa-save"></i>Load Draft
				</button>
    </div>
    <div class="table-responsive">
      <table class="w-100" id=HourlysalesSummary></table>
    </div>

  </form>
</div>

Upvotes: 0

Views: 208

Answers (2)

Haroon nasir
Haroon nasir

Reputation: 676

You have a logical problem .. just update this in your editData() method

 var temptable = [];
 $.each(tableDataDraft,function(index)
  {
    temptable.push(tableDataDraft[index]);
  });
  $.each(tableData,function(index)
   {
    temptable.push(tableData[index]);
   });

and you are good to go . check this result https://codepen.io/anon/pen/JxWrbd?editors=1010

Upvotes: 0

Crocsx
Crocsx

Reputation: 7640

First I would like to say that you should really rewatch your code and make it cleaner, more readable, less all in one.

Your function are 99% the same, you write it twice, just add a parameter and you can take out one of them.

You should also make it more readable by adding smaller function that do specific task (like building a row or a column) instead of putting everything in one huge function.

and for the variables, you are misspelling quantity in all your code to quantiry.

Finally, If I understand your problem correctly, you want the loaded value to remain displayed in the table when you edit it.

like this ? https://codepen.io/crocsx-the-styleful/pen/GzWvaN

If so, your mistake is here

if (targetArray[i]) {
  quantityField.setAttribute("value", targetArray[i]);
} else {
  quantityField.setAttribute("value", tabledata);
  targetArray[i] = tabledata;
}

but you should check if this work as you want (cause it not be working exactly as expected) cause it's pretty hard to understand what you want to achieve and how you are doing it. But basically, you should apply the change to your displayed array when you load it

EDIT : Try this :

https://codepen.io/crocsx-the-styleful/pen/GzWvaN

I do not know what edit should do but, now you have a variable currentQuantity that store all the data for an item ID. I believe from this point you can do what you want. open the console and click edit.

Upvotes: 1

Related Questions