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

Question

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

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

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

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

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

有人有想法吗？

Answer 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++;
}