We Keep Coding

Save data from new table row in local storage

I created an html table that automatically adds a new row from an input form. When I test it out, the new row is added but after I refresh the page, it's gone. How can I save the new row in local storage so I can keep the new data.
<script>
var table = document.getElementById("orders");
var row = table.insertRow(-1);
var Order_ID = row.insertCell(0);
var Order_Date = row.insertCell(1);
var Customer_Name = row.insertCell(2);
var Order_Balance_without_tax = row.insertCell(3);
var Downpayment_Balance = row.insertCell(4);
var Order_Delivered = row.insertCell(5);
var Delivery_Date = row.insertCell(6);
var Final_Order_Balance_with_tax = row.insertCell(7);
var Revenue_Check = row.insertCell(8);
var Payment_Received = row.insertCell(9);
var Receival_Date = row.insertCell(10);
var Check = row.insertCell(11);
var Bank_Deposit = row.insertCell(12);
var Deposit_Date = row.insertCell(13);
var Verification = row.insertCell(14);
var Verification_Date = row.insertCell(15);
Order_ID.innerHTML = '{{ID}}';
Order_Date.innerHTML = '{{OrderDate}}';
Customer_Name.innerHTML = '{{CustomerName}}';
Order_Balance_without_tax.innerHTML = '{{OrderBalance}}';
Downpayment_Balance.innerHTML = '{{Downpayment}}';
Order_Delivered.innerHTML = '{{Delivery}}';
Delivery_Date.innerHTML = '{{DeliveryDate}}';
Final_Order_Balance_with_tax.innerHTML = '{{FinalOrderBalance}}';
Revenue_Check.innerHTML = '{{RCheck}}';
Payment_Received.innerHTML = '{{PReceival}}';
Receival_Date.innerHTML = '{{PaymentDate}}';
Check.innerHTML = '{{CheckNum}}';
Bank_Deposit.innerHTML = '{{Deposit}}';
Deposit_Date.innerHTML = '{{DepositDate}}';
Verification.innerHTML = '{{Ver}}';
Verification_Date.innerHTML = '{{VerDate}}';
localStorage.setItem("data", $('#table').html());
</script>

I try this code and it works. note that I add most of code to addRow function and call it when needed. try these changes and tell me if they work.
<script>
var table = document.getElementById("orders");
if(localStorage.tableData==undefined){localStorage.tableData=table.innerHTML};
table.innerHTML = localStorage.tableData;
function addRow(){
var row = table.insertRow(-1);
var Order_ID = row.insertCell(0);
var Order_Date = row.insertCell(1);
var Customer_Name = row.insertCell(2);
var Order_Balance_without_tax = row.insertCell(3);
var Downpayment_Balance = row.insertCell(4);
var Order_Delivered = row.insertCell(5);
var Delivery_Date = row.insertCell(6);
var Final_Order_Balance_with_tax = row.insertCell(7);
var Revenue_Check = row.insertCell(8);
var Payment_Received = row.insertCell(9);
var Receival_Date = row.insertCell(10);
var Check = row.insertCell(11);
var Bank_Deposit = row.insertCell(12);
var Deposit_Date = row.insertCell(13);
var Verification = row.insertCell(14);
var Verification_Date = row.insertCell(15);
Order_ID.innerHTML = '{{ID}}';
Order_Date.innerHTML = '{{OrderDate}}';
Customer_Name.innerHTML = '{{CustomerName}}';
Order_Balance_without_tax.innerHTML = '{{OrderBalance}}';
Downpayment_Balance.innerHTML = '{{Downpayment}}';
Order_Delivered.innerHTML = '{{Delivery}}';
Delivery_Date.innerHTML = '{{DeliveryDate}}';
Final_Order_Balance_with_tax.innerHTML = '{{FinalOrderBalance}}';
Revenue_Check.innerHTML = '{{RCheck}}';
Payment_Received.innerHTML = '{{PReceival}}';
Receival_Date.innerHTML = '{{PaymentDate}}';
Check.innerHTML = '{{CheckNum}}';
Bank_Deposit.innerHTML = '{{Deposit}}';
Deposit_Date.innerHTML = '{{DepositDate}}';
Verification.innerHTML = '{{Ver}}';
Verification_Date.innerHTML = '{{VerDate}}';
localStorage.tableData=table.innerHTML;
};
</script>

Repetition in the table elements

Here I have the code for Firebase storage.
While doing this I am getting repetition in the table data. Here is my javascript code. I have done something logic mistake in the for loop.
function gotMuch(dude, guy)
{
var ex9 = dude.val();
var sa9 = Object.keys(ex9);
var s9 = sa9.length;
console.log("Hello there" + s9 + "");
var did = ex9.did;
var dmark = ex9.dmark;
var dname = ex9.dname;
console.log(did);
console.log(dmark);
console.log(dname);
var y = document.querySelectorAll(".subtable" + guy + "").length;
console.log("Class length is" + y + "");
var ytabl = document.querySelectorAll(".subtable" + guy + "");
var yd1 = document.createElement("td");
var yd2 = document.createElement("td");
var yd3 = document.createElement("td");
var space = document.createElement("br");
for(var b = 0; b < y; b++)
{
var row = ytabl[b].insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = did;
cell2.innerHTML = dname;
cell3.innerHTML = dmark;
}
}

How do I add a button to a td using js and set multiple attr?

My code is this, but attr delete botton, not work
var newList = snapshot.val();
var tableList = document.getElementById('mytable');
var rowIndex = 1;
var row = tableList.insertRow(rowIndex);
var cellName = row.insertCell(0);
var cellBottonDelete = row.insertCell(1);
cellName.appendChild(document.createTextNode(newList.name));
cellBottonDelete.appendChild(document.createElement("input", { type: "button", value:"Delete"}));
rowIndex = rowIndex + 1;
input is created but attr not. Any idea?

It's the solution
var newList = snapshot.val();
var tableList = document.getElementById('mytable');
var rowIndex = 1;
var row = tableList.insertRow(rowIndex);
var cellName = row.insertCell(0);
var cellBottonDelete = row.insertCell(1);
var itd = document.createElement('input');
itd.setAttribute("type","button");
itd.setAttribute("value","Delete");
cellName.appendChild(document.createTextNode(newList.name));
cellBottonDelete.appendChild(itd);
rowIndex = rowIndex + 1;

keep javascript variables values obtained by id after refresh

i'm getting some html input values with javascript that i insert in a table , but those turned null when i refresh , how can i keep those value visible after refresh . I know i should set and get my cookies but i just don't how .
here is my javascript code :
function myFunction(tableID) {
var x = document.getElementById("name").value;
var ad = document.getElementById("address").value;
var nu = document.getElementById("tel").value;
var pr = document.getElementById("product").value;
var s = document.getElementById("size").value;
var d = document.getElementById("date").value;
var st = document.getElementById("statu").value;
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = x;
var cell2 = row.insertCell(1);
cell2.innerHTML = ad;
var cell3 = row.insertCell(2);
cell3.innerHTML = nu;
var cell4 = row.insertCell(3);
cell4.innerHTML = pr;
var cell5 = row.insertCell(4);
cell5.innerHTML = s;
var cell6 = row.insertCell(5);
cell6.innerHTML = d;
var cell7 = row.insertCell(6);
cell7.innerHTML = st;
}
any help ?
THanks

One way to do it would be to stick them in sessionStorage (which will be accessible across page refreshes).
To store them:
sessionStorage.setItem('foo', 'bar');
to get them:
sessionStorage.getItem('foo');
When your page is loaded, you can get them from the sessionStorage to repopulate your elements.

you can use localStorage
// before you leave your page , save all your variables here
window.onunload = function(){
// save them one by one in to localStorage
localStorage.setItem("x", x)
...
}
when you enter the page load from localStorage first :
// before all your code work.
window.onload = function (){
// set value back one by one
document.getElementById("name").value = localStorage.getItem("x");
...
}

Retrieve a variable value from a table cell in javascript

How do I retrieve a variable value from a table cell using javascript.
var clicks = new Array();
var click1;
var click2;
function addTableRow() {
click1 = parseInt(document.getElementById('caption').value),10;
click2 = parseInt(document.getElementById('caption1').value),10;
var clicks = [click1, click2];
clicks.push({c1:clicks[0], c2:clicks[1]});
var table = document.getElementById('table');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var input = document.createElement('input');
input.setAttribute("type", "text");
input.style.width = "100px";
cell2.appendChild(input);
cell3.innerHTML = "x:" + clicks[0] + ", y:" + clicks[1];
var btnDelete = document.createElement('Button');
var btnDeleteText = document.createTextNode("Delete");
btnDelete.appendChild(btnDeleteText);
btnDelete.style.width = "80px";
cell4.appendChild(btnDelete);
btnDelete.onclick = function() {
var rowToDelete = this.parentNode.parentNode;
var parentReference = rowToDelete.parentNode;
parentReference.removeChild(rowToDelete);
var inputsInTable = document.getElementsByTagName('input');
for(i=0; i<inputsInTable.length; i++)
{
??????????????????????
}
}
}
Basically, when I add a row the clicks get stored in the array. When I delete a row, I need to update the array by rebuilding it.
I hope it's more clear now.
Any help would be very appreciated.
Marco