@Alex_87

Отслеживание количества table row (ряда таблиц) на странице. Работа с куки?

Всем доброго вечера! Я прошу вас помочь мне разобраться в задании. Постараюсь подробно и кратко описать суть задачи.

Имеется таблица, у строк которых есть id. У каждой строки(поправь меня, если я ошибаюсь) имеется в конце в ячейке кнопка ‘viewer’. Изначально, она имеет класс bg_green, задающий ей зелёный background. Это означает, что элемент новый и не просмотренный.
5dc882e217ed8192588851.png
Функция addTableID()
При нажатии на эту кнопку, id этой строки, попадает в массив, который в свою очередь попадает в куки.
Что происходит при перезагрузке страницы?
При перезагрузке страницы, вызывается другая функция, к примеру checkID(), которая должна проверят/сравнивать id элементов, находящиеся на странице, с теми id, которые находятся в куки. Если на странице появился новый элемент, то тогда у кнопки viewer данного элемента добавляется класс green.
https://codepen.io/Alexei_87/pen/MWWXREN
5dc8833d85336369100435.png

P.S. Логику описать кое-как смог, но написать код самому, не представляется возможным. Нет таких знании. Поэтому прошу вас о помощи!
  • Вопрос задан
  • 20 просмотров
Пригласить эксперта
Ответы на вопрос 1
dollar
@dollar
Лучше генерировать таблицу на сервере, на случай отключенного у пользователя JS. Даже если кнопки не будут работать, т.к. походу жестко завязаны на JS, то хоть инфа будет отображена для чтения, а не пустая страница.

Получить все строки можно чем-то вроде этого:
var rows = document.querySelectorAll('tbody tr');

Далее можно обработать по-всякому. Желательно, конечно, чтобы смысловые ячейки имели какие-то знаки - id или class, иначе придется по номеру считать:
rows.forEach(tr=>{
  let td2 = tr.children[1];
  let td6 = tr.children[5];
  let button = td6.querySelector('button');
  console.log(td2.innerText, button); //В цикле выводим всё, что нужно
});

Далее там же, в конце forEach добавьте вашу логику, ветвление, работу с куки и пр.
spoiler
rows.forEach(tr=>{
  let td2 = tr.children[1];
  let td6 = tr.children[5];
  let button = td6.querySelector('button');
  button.addEventListener("click", e=>{ //Например, обработчик кликов
    console.log('Кнопка ' + td2.innerText + ' нажата!');
    // ...............
  });
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
22 нояб. 2019, в 18:27
2000 руб./за проект
22 нояб. 2019, в 17:16
200 руб./за проект
22 нояб. 2019, в 17:09
6000 руб./за проект