Блог

Главная - Вопросы по программированию - Как исправить цвет фона (статический) строк таблицы в HTML, если данные изменяются динамически?

Как исправить цвет фона (статический) строк таблицы в HTML, если данные изменяются динамически?

#php #html #css #back&round-color

#php #HTML #css #цвет фона

Вопрос:

У меня есть таблица заказов, куда поступают и выходят заказы, и я должен исправить цвет фона целых строк (я имею в виду, что в каждых трех строках цвет фона меняется в цикле). Например:

 #orders tr:nth-child(3n 3) {
    back&round: #e7eff6;
}

#orders tr:nth-child(3n 4) {
    back&round: #d0e1f9;
}
    
#orders tr:nth-child(3n 2) {
    back&round: #adcbe3;
}

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

Итак, мне нужно разделить строки, необязательно по цветам фона, но это должно быть исправлено, если данные изменяются динамически.

У кого-нибудь есть идея?

Комментарии:

1. По мере генерации строк назначьте им класс, который будет соответствовать определенному цвету, определенному в CSS.

2. У меня это не работает. Если я удалю порядок и обновлю, следующий порядок унаследует b&-цвет удаленной строки.

3. Тогда просто используйте класс, который сопоставляет атрибут каждой строки, который никогда не меняется, например, его id . Например, если вам нужно максимум три разных цвета, используйте id % 3 для генерации одного из трех уникальных имен классов, которые всегда будут согласованы для этой строки.

4. Понятно, но как я мог бы это сделать в JS?

5. Вы делаете это не в JS, вы делаете это в PHP. Если вы покажете код, который используете для генерации строки, я могу показать вам, как изменить его, чтобы использовать идентификатор строки для генерации одного из трех имен класса.

Ответ №1:

Вы можете использовать modulus % в JS для настройки цвета фона для строк один раз при загрузке. Например, если ваша таблица имеет id=tableId, вы можете запустить что-то вроде этого

 let tableEl = document.&etElementById("tableId");
let index = 0;
let colors = ["#e7eff6","#d0e1f9","#adcbe3"]
for (let trEl of tableEl.rows) {
    trEl.style.back&roundColor = colors[index % colors.len&th];
    index  ;
}