Селектор CSS для добавления стиля к nth-child(even) не работает для динамически добавляемых строк таблицы. Это ошибка пр ⇐ CSS

[Anonymous]

Я экспериментирую с добавлением содержимого из массива в таблицу на моей странице, которая в коде имеет только строку заголовка и селектор CSS, который устанавливает для контейнера div значение «display:none;». Сразу после объявления таблицы я создал на своей HTML-странице небольшой скрипт, который динамически добавляет строки в таблицу следующим образом:

Код: Выделить всё

Popular Disney Characters by Merchandise Sales


Character
Rank



let characters = ["Mickey Mouse", "Minnie Mouse", "Goofy", "Donald Duck", "Pluto"];
let charTable = document.getElementById("div-load");
for (let i = 0; i < characters.length; i++) {
let charRank = i + 1;
let   tr = "" + characters[i] + "" +     charRank + "";
document.getElementById("table-fill").innerHTML += tr;
}
if (characters.length > 0) {
charTable.style["display"] = "block";
}

У меня также есть следующий CSS-селектор для раскрашивания строк таблицы:

Код: Выделить всё

tr:nth-child(even) {
background-color: #76d0c0;
}

У меня есть другие селекторы, которые применяются к этой таблице, и они применяются правильно как к этой динамически созданной таблице, так и к другой статически созданной таблице на странице, поэтому я буду игнорировать их для контекста. этой проблемы...
В любом случае, когда я загружаю страницу с пустым массивом, мой оператор if возвращает false, как и ожидалось, и страница не отображается на экране. Когда я добавляю значения в массив, я обнаруживаю, что атрибут фона-цвета не применяется к строкам, которые я добавляю, поэтому получаю следующий результат:
< img alt="введите описание изображения здесь" src="https://i.sstatic.net/LhiQyaZd.png" />
Но если я изменю свой селектор CSS на просто "tr ", то я получаю такой результат:


Как вы можете видеть на изображениях, селектор tr правильно применяется к статической таблице, поэтому я пока не учитываю ошибку в селекторе CSS. Есть ли ошибка в способе обработки nth-child, когда дело доходит до динамического контента, или существует предпочтительный способ динамической реализации стиля nth-child? Полагаю, я мог бы добавить в свой скрипт логику, чтобы добавить встроенный стиль, но, учитывая, что в противном случае динамическое оформление работает, это кажется неэффективным.
Как упоминалось выше, простое закомментирование спецификации nth-child применил он ожидал динамического стиля, поэтому я немного озадачен тем, почему nth-child не работает. Я также убедился, что в браузерах Chrome и Edge это ведет себя одинаково.

Подробнее здесь: https://stackoverflow.com/questions/784 ... amically-a