CryNet,
макет, это то, что ниже ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<p>Введите заголовок: <input type="text" id="setName"></p>
<p>Введите описание: <input type="text" id="setText"></p>
<button id="setValue">Добавить</button>
<hr>
<h3>Список идей:</h3>
<table id="tbl">
<thead>
<tr>
<th>Название</th>
<th>Описание</th>
<th>Навигация</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
<br>
<button id="del">Очистить</button>
<script>
var localStorageArray = [];
var tr, tdLeft, tdRight, tdDelete;
// получаем из localStorage данные
if(localStorage.getItem('todo')!=undefined){
localStorageArray = JSON.parse(localStorage.getItem('todo'));
echo();
}
// получаем данные из формы
document.getElementById('setValue').onclick = function(){
var temp = {};
var text = document.getElementById('setText').value;
var name = document.getElementById('setName').value;
if(text != '' && name != '') {
temp.name = name;
temp.text = text;
// temp.check = 'false';
var i = localStorageArray.length;
localStorageArray[i] = temp;
echo();
localStorage.setItem('todo', JSON.stringify(localStorageArray));
} else {
alert('Заполните все поля');
}
}
// выводим данные из массива, создавая ячейки в таблице
function echo() {
document.getElementById('tableBody').innerHTML = ""; // очищаем контейнер
var table = document.getElementById('tableBody');
// выводим данные из массива
for (const key in localStorageArray){
tr = document.createElement('tr'); //создаем еще строку
table.appendChild(tr);
tdLeft = document.createElement('td'); // создаем столбец
tdLeft.innerHTML = localStorageArray[key].name;
tdRight = document.createElement('td'); // создаем столбец
tdRight.innerHTML = localStorageArray[key].text;
// копка удалить
tdDelete = document.createElement('td');
tdDelete.innerHTML = `<button class="idTable">Удалить</button>`;
// добавляем элементы на страницу
tr.appendChild(tdLeft); // "Название"
tr.appendChild(tdRight); //"Описание"
tr.appendChild(tdDelete); //"Навигация"
}
[].forEach.call(document.querySelectorAll('button.idTable'), function(el){
el.addEventListener('click', function () {
var tr= this.parentNode.parentNode;
var index = tr.rowIndex - 1
tableBody.deleteRow(index);
localStorageArray.splice(index, 1);
localStorage.setItem('todo', JSON.stringify(localStorageArray));
})
});
}
document.getElementById('del').onclick = function(){
localStorageArray = [];
localStorage.clear();
location.reload();
}
</script>
</body>
</html>