get field values from dynamic table to be saved in localStorage - html and javascript

Question

I have a dynamic table created and need to save it in the localStorage . I have two problems.

1. when I add a first row - it doesn't show values in the console . But it displays when I add a row second time.
2. I need to save all the fields like : (fname1, lname1, phone1, email1, fname2, lanem2, phone2, email2, fname3, lname3, phone3, email3)

Bellow is the code:

 var table = document.getElementById('dynTable'), tbody = table.getElementsByTagName('tbody')[0], clone = tbody.rows[0].cloneNode(true); function deleteRow(el) { var i = el.parentNode.parentNode.rowIndex; table.deleteRow(i); while (table.rows[i]) { addRow(table.rows[i], i, false); i++; } } function insRow() { var new_row = addRow(clone.cloneNode(true), ++tbody.rows.length, true); tbody.appendChild(new_row); } function addRow(row, i, reset) { var F_Name = row.cells[0].innerHTML = i; var L_Name = row.cells[1].getElementsByTagName('input')[0]; var Phone = row.cells[2].getElementsByTagName('input')[0]; var Email = row.cells[3].getElementsByTagName('input')[0]; Number = 'Number' + i; F_Name.id = 'F_Name' + i; L_Name.id = 'L_Name' + i; Phone.id = 'Phone' + i; Email.id = 'Email' + i; return row; } function save() { var myTab = document.getElementById('dynTable'); var myArray = new Array(); var rowLength = myTab.rows.length - 1; for (row = 1; row < rowLength; row++) { for (c = 0; c < 5; c++) { // EACH CELL IN A ROW. var element = myTab.rows.item(row).cells[c]; var curtext = myArray.push("'" + element.childNodes[0].value + "'"); } } // var mylocalVar = localStorage.setItem("rowData", myArray); console.log(myArray); } 

 <form action="dynamicTable.html" method="get" > <table id="dynTable" border="1"> <thead> <tr> <td></td> <td>F_Name</td> <td>L_Name</td> <td>Phone</td> <td>Email</td> </tr> </thead> <tbody> <tr> <td>1</td> <td><input type="text" id="F_Name" /></td> <td><input type="text" id="L_Name" /></td> <td><input type="text" id="Phone" /></td> <td><input type="text" id="Email" /></td> <td><input type="button" id="addmore" value="Add More" onclick="insRow()"/></td> </tr> </tbody> </table> <input type="button" id="btn" value="Save" onclick="save()" /> </form> 

Answer 1

Here you go, There is a problem in your logic. In save logic, you are starting from the first index in the table and does not iterate to even first index. So it should be like this for (row = 1; row <= rowLength; row++) .

See below working snippet:

 var table = document.getElementById('dynTable'), tbody = table.getElementsByTagName('tbody')[0], clone = tbody.rows[0].cloneNode(true); function deleteRow(el) { var i = el.parentNode.parentNode.rowIndex; table.deleteRow(i); while (table.rows[i]) { addRow(table.rows[i], i, false); i++; } } function insRow() { var new_row = addRow(clone.cloneNode(true), ++tbody.rows.length, true); tbody.appendChild(new_row); } function addRow(row, i, reset) { var F_Name = row.cells[0].innerHTML = i; var L_Name = row.cells[1].getElementsByTagName('input')[0]; var Phone = row.cells[2].getElementsByTagName('input')[0]; var Email = row.cells[3].getElementsByTagName('input')[0]; Number = 'Number' + i; F_Name.id = 'F_Name' + i; L_Name.id = 'L_Name' + i; Phone.id = 'Phone' + i; Email.id = 'Email' + i; return row; } function save() { var myTab = document.getElementById('dynTable'); var myArray = new Array(); var rowLength = myTab.rows.length - 1; for (row = 1; row <= rowLength; row++) { for (c = 0; c < 5; c++) { // EACH CELL IN A ROW. var element = myTab.rows.item(row).cells[c]; var curtext = myArray.push("'" + element.childNodes[0].value + "'"); } } // var mylocalVar = localStorage.setItem("rowData", myArray); console.log(myArray); } 

 <form action="dynamicTable.html" method="get"> <table id="dynTable" border="1"> <thead> <tr> <td></td> <td>F_Name</td> <td>L_Name</td> <td>Phone</td> <td>Email</td> </tr> </thead> <tbody> <tr> <td>1</td> <td><input type="text" id="F_Name" /></td> <td><input type="text" id="L_Name" /></td> <td><input type="text" id="Phone" /></td> <td><input type="text" id="Email" /></td> <td><input type="button" id="addmore" value="Add More" onclick="insRow()" /></td> </tr> </tbody> </table> <input type="button" id="btn" value="Save" onclick="save()" /> </form>