There is a table on the index.html page, in each line of which there is a checkbox . By clicking on the checkbox, the current line is deleted and loaded into localstorage. When you go to the done.html page that contains the identical table, the rows from localstorage (exactly those that have been deleted by checkbox) should be loaded. If the line is one, it is less clear how it should be stored. But how to store and unload data from storage if I mark several lines? It should be something like this:
1. I go to index.html
2. I press on the checkbox
3. The string is deleted and written to the repository.
3. I go to done.html
4. By onload the previously saved string is loaded from the storage
5. I go again to index.html
6. I mark one more checkbox
7. I overwrite the repository with the updated data already with two lines (here, in theory, we get what we already have in the repository, add the newly deleted line to the existing data and put it back into the repository)
8. I go to done.html
9. I already see these 2 lines
I hope the question is clear, if anything, ask clarifying questions.
function insertRow(id) { var tbody = document.getElementById(id), row = document.createElement("tr"), cellCounter = document.getElementById("myTable").rows.length; var checkbox = document.createElement("input"); checkbox.type = 'checkbox'; checkbox.className = 'checkbox_done'; checkbox.setAttribute('onclick', 'deleteRow(event)'); var btnEdit = document.createElement("input"); btnEdit.type = 'image'; btnEdit.className = 'btnEdit'; btnEdit.src = 'icons/edit.png'; btnEdit.addEventListener('click', function() { editButton(); return false; }); var btnDelete = document.createElement("input"); btnDelete.type = 'image'; btnDelete.className = 'btnDelete'; btnDelete.src = 'icons/delete.png'; btnDelete.setAttribute('onclick', 'delButton(event)'); var tdNum = document.createElement("td"); tdNum.setAttribute("id", "td1_id"); tdNum.appendChild(document.createTextNode(cellCounter)); var tdDone = document.createElement("td"); tdDone.appendChild(checkbox); var tdItem = document.createElement("td"); tdItem.appendChild(document.createTextNode(document.getElementById("add_id").value)); var tdQuant = document.createElement("td"); tdQuant.appendChild(document.createTextNode(document.getElementById("quant_id").value)); var tdPrice = document.createElement("td"); tdPrice.appendChild(document.createTextNode(document.getElementById("price_id").value)); var tdAction = document.createElement("td"); tdAction.setAttribute('colspan', '2'); tdAction.appendChild(btnEdit); tdAction.appendChild(btnDelete); row.appendChild(tdNum); row.appendChild(tdDone); row.appendChild(tdItem); row.appendChild(tdQuant); row.appendChild(tdPrice); row.appendChild(tdAction); tbody.appendChild(row); localStorage.setItem('ShoppingList', document.getElementById('myTable').innerHTML); } function editButton() { localStorage.setItem('DoneList', document.getElementById("tbody").innerHTML); } function delButton(elemCheck) { var checkboxElement = elemCheck.target; var elCheck = checkboxElement.parentElement.parentElement; elCheck.parentElement.removeChild(elCheck); localStorage.setItem('DeleteList', document.getElementById("tbody").innerHTML); localStorage.setItem('ShoppingList', document.getElementById("myTable").innerHTML); } function deletedLS() { var DeleteList = localStorage.getItem('DeleteList'); if (DeleteList !== null) { document.getElementById("tbody").innerHTML = DeleteList; } } function doneLS() { var DoneList = localStorage.getItem('DoneList'); if (DoneList !== null) { document.getElementById("myTable").innerHTML = DoneList; } } function indexLS() { var ShoppingList = localStorage.getItem('ShoppingList'); if (ShoppingList !== null) { document.getElementById("myTable").innerHTML = ShoppingList; } } function deleteRow(elemCheck) { var checkboxElement = elemCheck.target; var elCheck = checkboxElement.parentElement.parentElement; elCheck.parentElement.removeChild(elCheck); localStorage.setItem('ShoppingList', document.getElementById("myTable").innerHTML); } .menu { position: absolute; left: 5px; top: 20px; width: 380px; height: 530px; } .main { background: #E9ECEF; position: absolute; left: 400px; top: 20px; width: 700px; height: 250px; } .table { position: absolute; left: 400px; top: 300px; width: 700px; height: 250px; } .list { list-style-type: none; } .li_index { background: #007BFF; border-radius: 4px; padding: 10px 0px 10px 15px; } .li_done { background: #007BFF; border-radius: 4px; padding: 10px 0px 10px 15px; } .li_del { background: #007BFF; border-radius: 4px; padding: 10px 0px 10px 15px; } .li { padding: 10px 0px 10px 15px; } .hr { width: 650px; margin: 10px 20px 10px 20px } .h1 { padding: 20px 0px 0px 20px; } .inputs { position: absolute; padding: 5px 10px 5px 10px; width: 700; } .input_add { border-radius: 4px; padding: 8px 10px 8px 10px; width: 230px; margin-left: 10px; border: 1px solid grey; } .input_quant { border-radius: 4px; padding: 8px 10px 8px 10px; width: 70px; margin-left: 40px; border: 1px solid grey; } .input_price { border-radius: 4px; padding: 8px 10px 8px 10px; width: 70px; margin-left: 40px; border: 1px solid grey; } .input_button { border-radius: 4px; padding: 8px 10px 8px 10px; width: 80px; margin-left: 40px; border: 1px solid grey; } .tr { color: white; background-color: black; border-color: black; height: 40px; text-align: center; } .body { font-family: Myriad Pro; } .mytable { width: 700px; } .link { text-decoration: none; font-size: 18px; color: #007BFF; } .link_index { text-decoration: none; font-size: 18px; color: white; } .link_done { text-decoration: none; font-size: 18px; color: white; } .link_del { text-decoration: none; font-size: 18px; color: white; } // INDEX.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/style.css" rel="stylesheet"> <title>Cart - Shopping List</title> <link rel="shortcut icon" type="image/png" href="icons/shortcut_add.ico" /> </head> <body onload="indexLS();return false;" class="body"> <div class="menu"> <ul class="list"> <li class="li_index"><a class="link_index" href="index.html">Shopping list</a></li> <li class="li"><a class="link" href="done.html">Done</a></li> <li class="li"><a class="link" href="deleted.html">Deleted</a></li> </ul> </div> <div class="main"> <h1 class="h1">Shopping List</h1> <hr class="hr"> <div class="inputs"> <input class="input_add" type="text" id="add_id" placeholder="Add items to you Shopping List"> <input class="input_quant" type="text" id="quant_id" placeholder="Quant."> <input class="input_price" type="text" id="price_id" placeholder="Price"> <button class="input_button" type="button" onclick="insertRow('myTable');return false;">Add</button> </div> </div> <div class="table"> <table class="mytable" id="myTable" cellspacing="0" border="1"> <tbody id="tbody"> <tr id="tr_id" class="tr"> <td>#</td> <td>Done</td> <td>Item</td> <td>Quantity</td> <td>Price $</td> <td colspan="2" width="100">Action</td> </tr> </tbody> </table> </div> </body> <script src="js/main.js"></script> </html> // DONE.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/style.css" rel="stylesheet"> <title>Cart - Done Items</title> <link rel="shortcut icon" type="image/png" href="icons/shortcut_done.ico" /> </head> <body onload="doneLS();return false;" class="body"> <div class="menu"> <ul class="list"> <li class="li"><a class="link" href="index.html">Shopping list</a></li> <li class="li_done"><a class="link_done" href="done.html">Done</a></li> <li class="li"><a class="link" href="deleted.html">Deleted</a></li> </ul> </div> <div class="main"> <h1 class="h1">Done Items</h1> </div> <div class="table"> <table class="mytable" id="myTable" cellspacing="0" border="1"> <tbody id="tbody"> <tr id="tr_id" class="tr"> <td>#</td> <td>Done</td> <td>Item</td> <td>Quantity</td> <td>Price $</td> <td colspan="2" width="100">Action</td> </tr> </tbody> </table> </div> </body> <script src="js/main.js"></script> </html> Help to put this into practice. Thank!
