如果数据动态变化，如何修复 HTML 中表格行的背景颜色（静态）？

Posted 2023-03-06

【中文标题】如果数据动态变化，如何修复 HTML 中表格行的背景颜色（静态）？

【英文标题】：How to fix background-color(static) of table rows in HTML if the data changes dynamically?

【发布时间】：2020-12-06 07:38:39

【问题描述】：

我有一个订单表，订单进出，我必须修复整行的背景颜色（我的意思是每三行背景颜色在一个循环中变化）。 例如：

#orders tr:nth-child(3n+3) 
    background: #e7eff6;


#orders tr:nth-child(3n+4) 
    background: #d0e1f9;

    
#orders tr:nth-child(3n+2) 
    background: #adcbe3;

但是有一个问题，因为如果一个订单进入或者一个订单被取消和退出，那么行背景颜色将会改变，但我必须修复它并保持最初的颜色。

所以，我需要分隔行，这不是背景颜色所必需的，但如果数据动态变化，则必须修复它。

有人有想法吗？

【问题讨论】：

在生成行时，为它们分配一个类，该类将映射到 CSS 中定义的特定颜色。

它对我不起作用。如果我删除一个订单并刷新，下面的订单会继承被删除行的bg-color。

然后只使用一个类，该类映射到每行的一个永远不会改变的属性，例如它的id。例如，如果您想要最多三种不同的颜色，请使用 id % 3 生成三个唯一的类名之一，这对于该行将始终保持一致。

我明白了，但是在 JS 中我怎么能做到这一点？

你不是在 JS 中做的，而是在 php 中做的。如果您显示用于生成行的代码，我可以向您展示如何修改它以使用行的 ID 来生成三个类名之一。

【参考方案1】：

您可以在 JS 中使用模数 % 在加载时为行设置背景颜色。 例如，如果你的表有 id=tableId，你可以运行类似的东西

let tableEl = document.getElementById("tableId");
let index = 0;
let colors = ["#e7eff6","#d0e1f9","#adcbe3"]
for (let trEl of tableEl.rows) 
    trEl.style.backgroundColor = colors[index % colors.length];
    index++;