Kontrollkästchen und ID zur Tabelle hinzufügen? localstorage

Ok, ich versuche eine To-Do-Liste zu erstellen. Ich brauche Kontrollkästchen und eine ID, die an jede Aufgabe angehängt ist - und ich muss den Checkbox-Status speichern, damit ich ihn wieder hochziehen kann. Ich frage mich, ob es einen Weg gibt, dies zu tun, ohne ein weiteres "Speichern" hinzuzufügen. Art Knopf? Kann ich es nur speichern, nachdem die Box angeklickt wurde? Ich müsste in der Lage sein, den Zustand in den lokalen Speicher zu speichern, also bei der Aktualisierung, wenn die Tabelle auf der Site angezeigt wird, dass sie den aktuellen Status des Kontrollkästchens enthält/ob die Aufgabe erledigt wurde ... dies ist, was ich gerade habe, ich habe einige Nachforschungen gemacht und es sieht so aus, als ob es einen Weg gibt, das durchzuziehen, wenn ich das, was ich habe, komplett zerreiße, aber ich kann es nicht richtig funktionieren sehen und versuche herauszufinden, ob es einen gibt Art und Weise zu tun, was ich ohne ganz vorne beginnen tun müssen, und alles abzureißen ...Kontrollkästchen und ID zur Tabelle hinzufügen? 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>

Quelle

2017-02-19 Kaitlin Danson

Ein Weg, wie Sie dies tun können, ist durch creating a <input type="checkbox"/> element und das Anfügen einer onchange event handler, die den Speicher aktualisiert, wann immer es sich ändert.

Nun, um zu wissen, welche Aufgabe zu aktualisieren, benötigen wir die Position (d. H. Index) der Aufgabe im Array. Wir liefern den Index als 2. Argument von addTaskToTable(), da dann die Tabellenzeile erstellt wird.

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

Quelle

2017-02-19 04:11:50 Mikey

danke für Ihre Hilfe! Das hat mir auch geholfen, das ID-Problem herauszufinden :) –

Kontrollkästchen und ID zur Tabelle hinzufügen? localstorage

Antwort

Verwandte Themen