добавление флажка и идентификатора в таблицу? localstorage

Хорошо, я пытаюсь создать список дел. Мне нужны флажки и идентификатор, прикрепленный к каждой задаче --- и мне нужно сохранить состояние в ящике, чтобы я мог его снова открыть .. им интересно, есть ли способ сделать это, не добавляя еще один «сохранить», тип кнопки? могу ли я просто сохранить его после щелчка на ящике? Мне нужно было бы сохранить состояние в локальном хранилище, поэтому при обновлении, когда таблица будет отображаться на сайте, он будет включать текущее состояние флажка/независимо от того, была ли выполнена эта задача ... это это то, что у меня есть в настоящее время, я действительно занимался некоторыми исследованиями, и похоже, что есть способ снять это, если я полностью разорву то, что у меня есть, но я не могу заставить его работать правильно, и я пытаюсь выяснить, есть ли способ делать то, что мне нужно сделать, не полностью, начиная снова и срывая все ...добавление флажка и идентификатора в таблицу? 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, который будет обновлять хранилище всякий раз, когда он изменяется.

Теперь, чтобы узнать, какая задача для обновления, нам нужна позиция (то есть индекс) задачи в массиве. Мы поставим индекс как 2-й аргумент 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

благодарит за Вашу помощь! это действительно помогло мне выяснить проблему с идентификатором также :) –

добавление флажка и идентификатора в таблицу? localstorage

ответ

Смежные вопросы