Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2021, 13:46
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 46

Запомнить выбор background при клике на tr localStorage
Добрый день, подскажите как запомнить выбор пользователя при клике на строку в таблице. Допустим пользователь кликнул на 2 строку и цвет этой строки остался желтым.

https://jsfiddle.net/0wyb7n36/
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2021, 14:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

denis_kontarev,
присвоить ячейке класс, из всех ячеек с данным классом создать массив индексов. сохранить массив в localStorage, при загрузке цикл по массиву с присвоением класса ячейкам.
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2021, 18:14
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 46

Сообщение от рони Посмотреть сообщение
denis_kontarev,
присвоить ячейке класс, из всех ячеек с данным классом создать массив индексов. сохранить массив в localStorage, при загрузке цикл по массиву с присвоением класса ячейкам.
Да, общее представление имеется, если это возможно с вашей стороны как то показать в коде функционал
Ответить с цитированием
  #4 (permalink)  
Старый 10.07.2021, 18:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

localStorage сохранение выбранных строк
denis_kontarev,
<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .table {
            -webkit-box-shadow: 0px 0px 1px 0px #ccc;
            -moz-box-shadow: 0px 0px 1px 0px #ccc;
            box-shadow: 0px 0px 1px 0px #ccc;
            width: 100%;
            border-collapse: collapse;
        }

        .table tr:hover td {
            filter: opacity(50%);
        }

        .table tr.active td{
            background-color: rgba(255, 255, 0, 1);
        }
    </style>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let items = JSON.parse(window.localStorage.getItem("active") || "[]");
            let trs = [...document.querySelectorAll(".table tr")];
            items.forEach(i => trs[i].classList.add("active"));
            this.addEventListener("click", ({
                target
            }) => {
                if (target = target.closest(".table tr")) target.classList.toggle("active");
                let trsActive = [...document.querySelectorAll(".table tr.active")].map(tr => trs.indexOf(tr));
                window.localStorage.setItem("active", JSON.stringify(trsActive))
            });

        });
    </script>
</head>

<body>

    <table class="table">
        <tbody>
            <tr>
                <td><span>Текст 1</span></td>
            </tr>
        </tbody>
    </table>

    <table class="table">
        <tbody>
            <tr>
                <td><span>Текст 2</span></td>
            </tr>
        </tbody>
    </table>

    <table class="table">
        <tbody>
            <tr>
                <td><span>Текст 3</span></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Последний раз редактировалось рони, 10.07.2021 в 18:53.
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2021, 21:54
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 46

Огромное спасибо. Отлично работает
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Добавить/удалить класс при клике. Skrowaks Общие вопросы Javascript 5 02.08.2016 05:08
При клике появлялся новый элемент (бесконечно) Eadweard Элементы интерфейса 3 16.02.2016 08:13
При клике на кнопку переход к якорю и открытие блока Galyanov Элементы интерфейса 19 11.12.2015 21:12
Изменение размера элемента при клике Derekovich Элементы интерфейса 25 05.12.2013 20:45