CODEWITHSUNDEEP
javascripthtml
user3280899
user3280899

Reputation: 199

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

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>

Upvotes: 0

Views: 296

Answers (1)

Keyur Ramoliya
Keyur Ramoliya

Reputation: 1924

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>

Upvotes: 1

Related Questions