Javascript-форум - Запомнить выбор background при клике на tr localStorage

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Запомнить выбор background при клике на tr localStorage (https://javascript.ru/forum/jquery/82816-zapomnit-vybor-background-pri-klike-na-tr-localstorage.html)

Запомнить выбор background при клике на tr localStorage

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

https://jsfiddle.net/0wyb7n36/

denis_kontarev,
присвоить ячейке класс, из всех ячеек с данным классом создать массив индексов. сохранить массив в localStorage, при загрузке цикл по массиву с присвоением класса ячейкам.

Цитата:

Сообщение от рони (Сообщение 538553)

Да, общее представление имеется, если это возможно с вашей стороны как то показать в коде функционал

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>

Огромное спасибо. Отлично работает :)