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

Question

[Alex_87]

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

Имеется таблица, у строк которых есть id. У каждой строки(поправь меня, если я ошибаюсь) имеется в конце в ячейке кнопка ‘viewer’. Изначально, она имеет класс bg_green, задающий ей зелёный background. Это означает, что элемент новый и не просмотренный.

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


P.S. Логику описать кое-как смог, но написать код самому, не представляется возможным. Нет таких знании. Поэтому прошу вас о помощи!

Comments

[Alex_87]

P.S. В помощь(если конечно поможет), привожу слова одного разработчика:
"ну тебе при помощи js наде генерировать html
это полувится цикл..
и в цикле будет условие.. какой класс кнопке даватб
…
ну получается нажимаешь на ряд, и в аттрибутах ряда должен быть айди
который ты и будешь добавлять /убиратб из кук
если такой есть в куки
то меняегь класс, тоесть делаешь кнопку..
зеленой... красной?
и наоборот
…
тоесть у ряда, есть атрибут к примеру item-id
значение этого атрибута удаляется, записывается в куки
это на сервере генерироваться должно
этот атрибут
значение для атрибута можно вытащить с самого id"

Answer 1

[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 + ' нажата!');
    // ...............
  });
});

Comments

[Alex_87]

Пользоваться этой страницей будет 1 максимум 4 человека. Это всё для админки делается. Поэтому, насчёт отключения js думать не стоит.
Касаемого вашего кода, возник вопрос. Я каждой ячейки, содержащей значение id, присвоил класс idTable и попробовал вывести в консоль. Но у меня что-то не то вышло:

var rows = [];
rows = document.querySelectorAll('tbody tr td.idTable');
console.log(rows);

[dollar]

Не знаю, отлаживайте стандартным способом - методом исключения. Ослабьте условие и посмотрите, работает ли и т.д.
P.S. не путайте class и id.
Если у вас id, то querySelectorAll('tbody tr td#idTable')

[Alex_87]

dollar, Нет, idTable - это класс. Я задаю его всем ячейкам таблицы, содержащих значение id

[dollar]

Alex_87, всё равно, совет тот же - методом исключения.
Если всё же нашли парадокс, и мир готов рушится, то оформите пример, где это видно.