从动态表获取字段值以保存在localStorage中-html和javascript

Question

我创建了一个动态表，需要将其保存在localStorage中。我有两个问题。

1. 当我添加第一行时-它不会在console中显示值。但是当我第二次添加行时会显示。
2. 我需要保存所有字段，例如： （[fname1，lname1，phone1，email1， fname2，lanem2，phone2，email2， fname3，lname3，phone3，email3）

下面是代码：

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

在这里，您的逻辑存在问题。在保存逻辑中，您从表中的第一个索引开始，甚至没有迭代到第一个索引。因此应该像这样for (row = 1; row <= rowLength; row++)。

请参见以下工作片段：

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>