テーブルにチェックボックスと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()の2番目の引数として指定します。

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

答えて

関連する問題