function addNewRow() {
debugger;
var personList = [];
if (localStorage.person1 != null && localStorage.person1 !=undefined) {
var personList = JSON.parse(localStorage.person1);
}
var name = document.getElementById('name').value;
var city = document.getElementById('city').value;
personList.push({
pname: name,
pcity: city
});
localStorage.setItem('person1', JSON.stringify(personList));
displayRows();
}
function displayRows() {
debugger;
var per_list = JSON.parse(localStorage.getItem('person1'));
for (i = 0; i < per_list.length; i++ ) {
var table = document.getElementById('ptable');
var row = table.insertRow(0);
var col1 = row.insertCell(0);
var col2 = row.insertCell(1);
col1.innerHTML = per_list[i].pname;
col2.innerHTML = per_list[i].pcity;
}
}
I have two fields name and city; Now, clicking on "add row" prints ok for the first value, but afterwards it is printing both the old and new values. I want only the new entry to be displayed below the old input. Thanks in advance.