添加复选框和ID到表？ localstorage

好吧，我正在尝试创建待办事项列表。我需要复选框，并附上每个任务的ID ---我需要保存复选框的状态，以便我可以再次拉起它..即时通讯想知道是否有办法做到这一点，而不添加另一个“保存”键入按钮？我可以保存它一旦盒子被点击？我需要能够将状态保存到本地存储中，所以在刷新时，当表格显示在站点上时，它将包含复选框的当前状态/任务是否完成......是我目前的，我做了一些研究，看起来像有一种方法可以解决这个问题，如果我完全拆除我有的，但我似乎无法正常工作，我试图找出是否有一个办法做我需要完全没有首发过，并拆除所有做...添加复选框和ID到表？ localstorage

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>

来源

2017-02-19 Kaitlin Danson

您可以执行此操作的一种方法是通过creating a <input type="checkbox"/> element并附加一个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 
    }; 
}

来源

2017-02-19 04:11:50 Mikey

谢谢你的帮助！这实际上帮助我弄清了ID问题:) –

添加复选框和ID到表？ localstorage

回答

相关问题