Javascript 是否向表中添加复选框和id？本地存储_Javascript_Arrays_Loops_Checkbox_Local Storage

Javascript 是否向表中添加复选框和id？本地存储

javascript arrays loops checkbox

Javascript 是否向表中添加复选框和id？本地存储,javascript,arrays,loops,checkbox,local-storage,Javascript,Arrays,Loops,Checkbox,Local Storage,好的，我正在尝试创建一个待办事项列表。我需要复选框和附加到每个任务的id，我需要保存复选框状态，以便可以再次将其拉出。。我想知道是否有一种方法可以做到这一点，而不添加另一个“保存”类型的按钮？单击框后我可以保存它吗？我需要能够将状态保存到本地存储中，以便在站点上显示表时进行刷新，以使其包含复选框的当前状态/任务是否已完成。。。这就是我目前所做的，我做了一些研究，看起来有一种方法可以做到这一点，如果我完全摧毁我所拥有的，但我似乎无法让它正常工作，我试图找出是否有一种方法可以做到我需要做的事，而不完

好的，我正在尝试创建一个待办事项列表。我需要复选框和附加到每个任务的id，我需要保存复选框状态，以便可以再次将其拉出。。我想知道是否有一种方法可以做到这一点，而不添加另一个“保存”类型的按钮？单击框后我可以保存它吗？我需要能够将状态保存到本地存储中，以便在站点上显示表时进行刷新，以使其包含复选框的当前状态/任务是否已完成。。。这就是我目前所做的，我做了一些研究，看起来有一种方法可以做到这一点，如果我完全摧毁我所拥有的，但我似乎无法让它正常工作，我试图找出是否有一种方法可以做到我需要做的事，而不完全重新开始，并摧毁一切

JS:

var table=document.getElementById（“表体”）；
var toDoArray=[]；
buildTable（）；
函数buildTable（）{
var retrievedTaskObject=localStorage.getItem（“任务”）；
var parsedObject=JSON.parse（retrievedTaskObject）；
for（i=0；i


html:

待办事项清单
欢迎
在这里你可以列出你自己的待办事项。

任务：
创建日期：
提交

待办事项清单
任务名称创建日期ID完成？

实现这一点的一种方法是，在存储发生更改时，添加一个将更新存储的
现在，为了知道要更新哪个任务，我们需要任务在数组中的位置（即索引）。我们将提供索引作为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
    };
}

//注意安全：.getItem（key）将在开始时返回null，
//因此，如果发生这种情况，请准备一个备用空数组
var toDoArray=JSON.parse（localStorage.getItem（“任务”））| |[]；
var table=document.getElementById（“表体”）；
buildTable（）；
函数buildTable（）{
对于（i=0；i谢谢您的帮助！这实际上也帮助我解决了ID问题：）
<!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>

// 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
    };
}