если честно, сохранить, то что будет введено в ячейку
|
localStorage.setItem('div', '1234567'); alert (localStorage.getItem('div')); Прекрасно работает и в Хроме и в Файрфоксе. |
сохранение и редактирование содержимого ячеек таблицы js
Konstantin47,
двойной клик по ячейке, вход/выход из режима редактирования. начальные данные указать в массиве arr и придумать любое новое имя. пример tableEditor(tbody, arr, 'test') строка 67 <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> </head> <body> <table id="table"> <thead> <tr> <th scope="col">Nazwę</th> <th scope="col" >Opis</th> <th scope="col"> </th> </tr> </thead> <tbody> </tbody> </table> <script> const tableEditor = (tbody, arr = [], localName = "tds") => { if (localStorage[localName]) arr = JSON.parse(localStorage.getItem(localName)); let container = document.createDocumentFragment(); arr.forEach((ar, j) => { let tr = document.createElement("tr"); for (let txt of ar) { let td = document.createElement("td"); td.innerHTML = txt; td.dataset.j = j; tr.append(td) } container.append(tr) }); tbody.append(container); let input = document.createElement("input"); tbody.addEventListener("dblclick", ({ target }) => { if (input.parentNode) { let td = input.parentNode; let i = td.cellIndex; let j = td.dataset.j; input.remove(); td.textContent = arr[j][i] = input.value; localStorage.setItem(localName, JSON.stringify(arr)); } if (target.tagName == "TD") { input.value = target.textContent; target.textContent = ""; target.append(input) } }, true); } let arr = [ [1234, 1234], [1234, 1234] ]; let tbody = document.querySelector("#table tbody"); tableEditor(tbody, arr, "tdd") </script> </body> </html> |
Как то так попробуйте
<body> <table id='div'> <tr> <th scope="col">Nazwę</th> <th scope="col" >Opis</th> <th scope="col"> </th> </tr> <tr> <td>1234</td> <td>1234</td> <td>1234</td> </tr> <tr> <td>1234</td> <td>1234</td> <td>1234</td> </tr> <tr> <td>1234</td> <td>1234</td> <td>1234</td> </tr> </table> <script> let div = document.getElementById('div'); div.addEventListener('click', changeValue); div.addEventListener('focusout', changeEnd); function changeValue(event){ event.target.setAttribute('contenteditable', true); } function changeEnd(event){ event.target.removeAttribute('contenteditable'); console.log(event.target.innerText) setValues () } function setValues () { const tbd = document.getElementById('div').tBodies[0]; const rws = tbd.rows; const v = []; for (let i=0; i<rws.length; i++) { const cls= rws[i].cells; const cv = [] for (let j=0; j<cls.length; j++) { cv.push(cls[j].textContent); } v.push(cv); } localStorage.setItem('tblvalues',JSON.stringify(v)); console.log(localStorage.getItem('tblvalues')) } function restoreValues () { const tbd = document.getElementById('div').tBodies[0]; const rws = tbd.rows; let tbv = localStorage.getItem('tblvalues') if (!tbv) return const v = JSON.parse(tbv); for (let i=0; i<rws.length; i++) { const cls= rws[i].cells; for (let j=0; j<cls.length; j++) { cls[j].textContent = v[i][j]; } } } restoreValues () </script> </body> |
Цитата:
Я, если честно, не понимал до таких примеров, откуда вообще брать условия и циклы для сохранения. сам абзац про JS LokalStorage c очень разных источников пересмотрел и только сами функции понял 9 сохранить, достать, удалить), а циклы... Может подскажите - какой-то ресурс, с задачами и примерами решений? жизненными, вот, как активация форм input html, проверка паролей ,что именно в задачах с сайтами используется ps то что связано с математикой и console.Log - я могу и степени и корни и всякие формулы посчитать, а такие же задачи, они совсем другие и я просто не понимаю, с какой стороны подходить. Спасибо огромное за помощь! |
Часовой пояс GMT +3, время: 15:18. |