将复选框和 id 添加到表中？本地存储答案

【问题标题】：adding checkbox and id to table? localstorage将复选框和 id 添加到表中？本地存储
【发布时间】：2017-02-19 12:11:50
【问题描述】：

好的，我正在尝试创建一个待办事项列表。我需要复选框，以及附加到每个任务的 id --- 我需要保存复选框状态以便我可以再次将其拉起.. 我想知道是否有一种方法可以在不添加另一个“保存”的情况下做到这一点键入按钮？单击框后我可以保存它吗？我需要能够将状态保存到本地存储中，所以在刷新时，当表格显示在网站上时，它将包括复选框的当前状态/任务是否完成......这个是我目前所拥有的，我确实做了一些研究，如果我完全拆除我所拥有的东西，似乎有办法解决这个问题，但我似乎无法让它正常工作，我试图弄清楚是否有做我需要做的事情的方法，而不是完全重新开始和拆除一切......

JS：

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


var toDoArray = [];
buildTable();

function buildTable() {
  var retrievedTaskObject = localStorage.getItem("task");
  var parsedObject = JSON.parse(retrievedTaskObject);
  for (i = 0; i < parsedObject.length; i++) {
      toDoArray.push(getTaskObj(parsedObject[i].name, parsedObject[i].date));
      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);
      var storedArray = JSON.stringify(toDoArray);
      localStorage.setItem("task",storedArray);
};

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

html:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="todostyle.css"/>

    <title>To Do List</title>
  </head>
  <body>
    <div class="container">
      <h1 class="center">Welcome!</h1>
      <h2 class="center">Here you can make your own to-do list.</h2>
      <p>
        <form>
       <label>Task:</label>
       <input id="taskName" type="text"/>
       <label>Date Created:</label>
       <input id="dateTask" type="date"/>
       <button onclick="submitForm()" type="button" id="submit">Submit</button>

       </form>
      </p><p>
<table id="myTable" border="1"><thead>To Do List</thead>
  <th> Task Name </th><th> Date Created </th><th> ID </th><th> Completed? </th><tbody id="tableBody"></tbody>
</table>
      </p>
    </div>
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="test.js"></script>
  </body>
</html>

【问题讨论】：

标签： javascript arrays loops checkbox local-storage

【解决方案1】：

您可以通过creating a <input type="checkbox"/> element 并附加一个onchange event handler 来执行此操作，该onchange event handler 将在存储发生变化时更新它。

现在，为了知道要更新哪个任务，我们需要任务在数组中的位置（即索引）。我们会将索引作为addTaskToTable() 的第二个参数提供，因为那是您构建表格行的时候。

// be safe: .getItem(key) will return null at the beginning,
// so have a fallback empty array if that happens
var toDoArray = JSON.parse(localStorage.getItem("task")) || [];
var table = document.getElementById("tableBody");

buildTable();

function buildTable() {
    for (i = 0; i < toDoArray.length; i++) {
        // pass index of current element as 2nd parameter
        addTaskToTable(toDoArray[i], i);
    }
}

// add index as 2nd argument
function addTaskToTable(task, 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);
    // create checkbox
    var checkbox = document.createElement('input');

    cellName.innerHTML= task.name;
    cellDate.innerHTML= task.date;

    checkbox.type = 'checkbox';
    checkbox.checked = task.completed;
    checkbox.onchange = function () {
        // set completed property when checkbox is changed
        toDoArray[i].completed = this.checked;
        // save localstorage
        localStorage.setItem("task", JSON.stringify(toDoArray));
    };
    cellCheck.appendChild(checkbox);
}

function submitForm() {
    var task = createTask(taskName.value, dateTask.value, false);
    toDoArray.push(task);
    // pass index of last element added
    addTaskToTable(task, toDoArray.length - 1);
    localStorage.setItem("task", JSON.stringify(toDoArray));
};

function createTask(name, date, completed) {
    return {
        name: name,
        date: date,
        completed: completed
    };
}

【讨论】：

感谢您的帮助！这实际上也帮助我找出了 ID 问题 :)