Ok, I am trying to create a to-do list. I need check boxes, and an id attached to each task --- and I need to save the check boxed state so that I can pull it up again .. im wondering if there is a way to do this without adding another "save" type button? can i just save it once the box is clicked? I would need to be able to save the state into local storage, so on refresh, when the table is showing on the site, that it will include the current state of the check box/whether or not the task was done... this is what I have currently, I did do some research and it looks like there is a way to pull this off if i completely tear down what I have but i cant seem to get that working properly and im trying to figure out if there is a way to do what i need to do without totally starting over and tearing down everything...
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="http://ift.tt/1jAc5cP">
<link rel="stylesheet" href="http://ift.tt/1QgFFRj">
<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://ift.tt/1X42x8F"></script>
<script src="http://ift.tt/1jAc4pg"></script>
<script src="test.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire