Question

我正在构建一个包含HTML的表，然后创建了一个允许我选择单元格的函数。我还有一个文本字段，其中包含一个函数，它将单元格的innerText更改为文本字段中的值，将该值推送到每个表格单元格中的数据数组中。然后我将它保存到localStorage。

在这里我遇到了我的错误：如何从localStorage变量中正确检索数据并使用数组中的值重新填充表？

这是我的代码

省略表创建，textEntering，函数，因为它们似乎工作正常

function save() {
  localStorage.setItem("tblArrayJson", JSON.stringify(tblArray));
  document.getElementById("lblInfo").innerHTML = "Spreadsheet saved.";
}

这是有效的，因为在测试功能中我可以在警报中打印tblArrayJson。接下来我试图将数据加载到表中：

function loadSheet() {
  var loadedData = JSON.parse(localStorage.getItem("tblArrayJson"));
  var loadedTable = document.getElementById("SpreadsheetTable");
  var currRow, cell;
  alert("the retrieved JSON string contains: " + loadedData);

  for (var i = 0; currRow = loadedTable.rows[i]; i++) {
    for (var j = 0; cell = currRow.cells[j]; j++) {
      cell.innerHTML = loadedData.shift();
    }
  }
}

显示loadedData的警报工作正常。那么我的循环无法将数组值插回到表中是什么原因呢？他们只是留空。

我使用该功能的方式有问题吗？这是我的onclick按钮：

<input id="btnLoad" type="button" onclick="loadSheet();" value="Load" />

Answer 1

localStorage是对象。

通过对象for(var key in object) {}的循环不同到通过数组for(var i = 0; i < arr.length; i += 1) {}的循环。

如果数据看起来像

var loadedData = {
    0: ["cell1", "cell2", "cell3"],
    1: ["cell1", "cell2", "cell3"]
}

循环应该看起来像

for(var key in loadedData) {
    var row = loadedTable.insertRow();
    for(var i = 0; i < loadedData[key].length; i += 1) {
        var cell = row.insertCell(i);
        cell.innerHTML = loadedData[key][i];
    }
}

示例

＆＃13;
＆＃13;
var loadedData = { 0: ["cell1", "cell2", "cell3"], 1: ["cell1", "cell2", "cell3"] } function loadSheet() { //var loadedData = JSON.parse(localStorage.getItem("tblArrayJson")); var loadedTable = document.getElementById("SpreadsheetTable"); for (var key in loadedData) { var row = loadedTable.insertRow(); for (var i = 0; i < loadedData[key].length; i += 1) { var cell = row.insertCell(i); cell.innerHTML = loadedData[key][i]; } } } loadSheet();
＆＃13;
<table id="SpreadsheetTable"></table>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您的for循环缺少终止条件。我补充说，我可以随意修改以满足您的需求。

var data = {
  0: ["cell1", "cell2", "cell3"],
  1: ["cell4", "cell5", "cell6"]
};

// localStorage.tblArrayJson = JSON.stringify(loadedData);

function loadSheet() {
  // var data = JSON.parse(localStorage.tblArrayJson);
  var table = document.getElementById("SpreadsheetTable");
  var row, cell;
  
  // Used Object.keys() to get an array of all keys in localStorage
  for (var key of Object.keys(data)) {
    row = table.insertRow();
    
    for (var i = 0; i < data[key].length; i++) {
      cell = row.insertCell(i);
      cell.innerHTML = data[key][i];
    }
  }
}

loadSheet();

<table id="SpreadsheetTable"></table>

如何使用数组数组填充HTML表格？

2 个答案: