javascript - 向表中添加行、循环数组、做疯狂的事情、每次读取第一行

Question

我觉得这可能是某个循环的问题，但我对编码有点陌生，我很难弄清楚问题到底出在哪里。每次我向列表中添加新任务时，它都会再次打印第一个任务。因此，如果我添加第二个任务，它会将第一个任务和第二个任务插入表中，如果我添加第三个任务，它会将第一个任务和第三个任务插入表中......这很奇怪。

我查看了本地存储文件，它存储正确。如(任务一、任务二、任务三)中没有重复，并且它按照我想要的方式存储。

问题是我正在尝试这样做:

我想循环遍历数组，并将本地存储中存储的所有内容都发布到表上。 (目前，当我刷新时，它会完全重置。它的作用就像 session 存储而不是本地存储。刷新后它会显示在本地存储中，但是一旦我在刷新后单击添加更多内容，它就会消失)它是一个待办事项列表，所以我希望它基本上通过循环遍历数组来显示所有项目，当我添加一个新项目时，让它存储该项目并再次循环遍历数组并将其发布到 table 上。

var table = document.getElementById("tableBody");

toDoArray = [];


function buildTable(){
addToStorage();
var retrievedTaskObject = localStorage.getItem("task");
var parsedObject = JSON.parse(retrievedTaskObject);
var addTheTaskName = parsedObject.taskName;
var addTheTaskDate = parsedObject.taskDate;


  for(i=0; i < toDoArray.length; i++){
    var row = table.insertRow(0);
    var cellName = row.insertCell(0);
    var cellDate = row.insertCell(1);
    var cellId = row.insertCell(2);
    var cellCheck = row.insertCell(3);
    cellName.innerHTML= parsedObject[i].name;
    cellDate.innerHTML= parsedObject[i].date;
    var checkStuff = "<input type='checkbox'>";
    cellCheck.innerHTML = checkStuff;
  }


}

function submitForm(name,date) {
    var addTaskName = document.getElementById("taskName").value;
    var addTaskDate = document.getElementById("dateTask").value;
    var taskSomething = getTaskObj(addTaskName,addTaskDate);
      toDoArray.push(taskSomething);
      buildTable();
};

function getTaskObj(taskName,taskData){
var taskObject = {
        name: taskName,
        date: taskData,
      };
 return taskObject;
}

function addToStorage(){
  var storedArray = JSON.stringify(toDoArray);
  localStorage.setItem("task",storedArray);}

Answer 1

当您在提交表单中调用 buildTable 时，它​​会再次循环整个数组并将元素添加到表中。试试这个，

var table = document.getElementById("tableBody");

toDoArray = [];


function buildTable(){
addToStorage();
var retrievedTaskObject = localStorage.getItem("task");
var parsedObject = JSON.parse(retrievedTaskObject);
var addTheTaskName = parsedObject.taskName;
var addTheTaskDate = parsedObject.taskDate;

for(i=0; i < toDoArray.length; i++){
  addTaskToTable(parsedObject[i]);
}



}

function addTaskToTable(obj){
  var row = table.insertRow(0);
  var cellName = row.insertCell(0);
  var cellDate = row.insertCell(1);
  var cellId = row.insertCell(2);
  var cellCheck = row.insertCell(3);
  cellName.innerHTML= obj.name;
  cellDate.innerHTML= obj.date;
  var checkStuff = "<input type='checkbox'>";
  cellCheck.innerHTML = checkStuff;

}

function submitForm(name,date) {
    var addTaskName = document.getElementById("taskName").value;
    var addTaskDate = document.getElementById("dateTask").value;
    var taskSomething = getTaskObj(addTaskName,addTaskDate);
      toDoArray.push(taskSomething);
      addTaskToTable(taskSomething);
};

function getTaskObj(taskName,taskData){
var taskObject = {
        name: taskName,
        date: taskData,
      };
 return taskObject;
}

function addToStorage(){
  var storedArray = JSON.stringify(toDoArray);
  localStorage.setItem("task",storedArray);
  }