Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 10.02.2021, 21:14
Аспирант
Отправить личное сообщение для Konstantin47 Посмотреть профиль Найти все сообщения от Konstantin47
 
Регистрация: 12.01.2021
Сообщений: 32

если честно, сохранить, то что будет введено в ячейку
Ответить с цитированием
  #12 (permalink)  
Старый 10.02.2021, 21:27
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,918

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

Прекрасно работает и в Хроме и в Файрфоксе.
Ответить с цитированием
  #13 (permalink)  
Старый 10.02.2021, 21:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,434

сохранение и редактирование содержимого ячеек таблицы 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">&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>

Последний раз редактировалось рони, 10.02.2021 в 21:45.
Ответить с цитированием
  #14 (permalink)  
Старый 10.02.2021, 22:04
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,918

Как то так попробуйте
<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>

Последний раз редактировалось voraa, 10.02.2021 в 22:10.
Ответить с цитированием
  #15 (permalink)  
Старый 10.02.2021, 23:02
Аспирант
Отправить личное сообщение для Konstantin47 Посмотреть профиль Найти все сообщения от Konstantin47
 
Регистрация: 12.01.2021
Сообщений: 32

Сообщение от voraa Посмотреть сообщение
localStorage.setItem('div', '1234567');
alert (localStorage.getItem('div'));

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

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

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


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

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отправлять данные Local Storage через форму? Exhaust_ AJAX и COMET 2 04.03.2018 03:33
100% запуск расширения в Chrom? ekad Javascript под браузер 0 28.08.2016 06:17
Не работает CSS меню в IE (в FireFox и Chrom все нормально) bdb2000 Internet Explorer 1 05.04.2016 12:58
Обработка события с Local Storage taobo Events/DOM/Window 6 29.08.2012 14:36
Чего на сервере прикрутить чтобы Opera и Chrom понимали javascript? Casufi Оффтопик 0 08.02.2010 14:33