Форум

Konstantin47 · #11 (**permalink**) 10.02.2021, 21:14

если честно, сохранить, то что будет введено в ячейку

voraa · #12 (**permalink**) 10.02.2021, 21:27

localStorage.setItem('div', '1234567');
alert (localStorage.getItem('div'));

Прекрасно работает и в Хроме и в Файрфоксе.

рони · #13 (**permalink**) 10.02.2021, 21:40

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">&nbsp;</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>

voraa · #14 (**permalink**) 10.02.2021, 22:04

Как то так попробуйте

<body>
 
 <table id='div'>
 
 
   <tr>
    
   <th scope="col">Nazwę</th>
   <th scope="col" >Opis</th>
   <th scope="col">&nbsp;</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>

Konstantin47 · #15 (**permalink**) 10.02.2021, 23:02

Сообщение от voraa

localStorage.setItem('div', '1234567');
alert (localStorage.getItem('div'));

Прекрасно работает и в Хроме и в Файрфоксе.

ps но задать значение не с таблицы - это мой уровень, чтоб просто показало

Я, если честно, не понимал до таких примеров, откуда вообще брать условия и циклы для сохранения. сам абзац про JS LokalStorage c очень разных источников пересмотрел и только сами функции понял 9 сохранить, достать, удалить), а циклы...

Может подскажите - какой-то ресурс, с задачами и примерами решений? жизненными, вот, как активация форм input html, проверка паролей ,что именно в задачах с сайтами используется

ps то что связано с математикой и console.Log - я могу и степени и корни и всякие формулы посчитать, а такие же задачи, они совсем другие и я просто не понимаю, с какой стороны подходить.

Спасибо огромное за помощь!

Форум

Справочник

Discord чат

Курсы javascript