1

Есть таблица на странице index.html, в каждой строке которой есть checkbox. По нажатию на чекбокс удаляется текущая строка и загружается в localstorage. При переходе на страницу done.html, содержащую идентичную таблицу, должны загружаться строки из localstorage (именно те, которые были удалены по чекбоксу). Если строка одна, то более менее понятно как оно должно хранится. Но как хранить и выгружать данные из хранилища, если я отмечу несколько строк? Примерно должно получится как-то так:
1. Захожу в index.html
2. Жму на чекбокс
3. Строка удаляется и записывается в хранилище
3. Иду на done.html
4. По onload загружается из хранилища ранее сохраненная строка
5. Иду опять на index.html
6. Отмечаю еще один чекбокс
7. Перезаписываю в хранилище обновленные данные уже с двумя строками ( тут по идее мы получаем то что в хранилище уже есть, добавляем вновь удаленную строку к уже существующим данным и кладем обратно в хранилище)
8. Иду на done.html
9. Вижу уже эти 2 строки

Надеюсь вопрос понятен, если что, задавайте уточняющие вопросы.

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>

Помогите реализовать это на практике. Спасибо!

1 ответ 1

0
function deleteRow(elemCheck) {
  var checkboxElement = elemCheck.target;
  var elCheck = checkboxElement.parentElement.parentElement;
  elCheck.parentElement.removeChild(elCheck);
  var shoppingList = { items: [] };
  var text = localStorage.getItem('ShoppingList');
  if (text)
    shoppingList = JSON.parse(text);
  shoppingList.items.push(elCheck.outerHTML);
  localStorage.setItem('ShoppingList', JSON.stringify(shoppingList)); 
}
1
  • если честно, не очень понял( Я рассуждаю следующим образом: Когда я жму чекбокс я кладу эту строку в хранилище с ключом "DoneList", перехожу на done.html и из хранилища подгружается эта строка. Если я снова в index.html нажимаю чекбокс на другой строке - ключ "DoneList" должен перезаписаться, а точнее дополнится записью - еще одной строкой... как-то так... 26 дек 2017 в 15:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.