Question

我有一个表，其ID为“ movie”，标准CSS背景色对于偶数行是＃5f6268，对于奇数行是＃b5bdbf。但是，我有一个搜索功能可以摆脱搜索时不想看到的行。颜色混在一起，看起来都不好。

我怎么可能在我的javascript代码中插入ID为“ movie”的表格的tr，并为偶数行添加背景颜色＃5f6268，为奇数行添加＃b5bdbf？（代码也必须忽略）没有样式显示的tr）

我尝试做

document.getElementById("movie").tr:odd.backgroundColor="red";

作为测试，没有用。

Answer 1

您可以使用纯CSS做到这一点：

#movie tr:nth-child(even) td { background: #5f6268; }
#movie tr:nth-child(odd) td { background: #b5bdbf; }

根据给定要求进行编辑...

根据您隐藏/显示行的方式，您应该能够在扫描行以重新着色的过程中查看任何属性，例如

functionToRunAfterSearchCompletes() {
    var rows = document.querySelectorAll('#movie tr');
    var odd = false;
    for(var i=0;i<rows.length;i++) {
       if(rows[i].style.display !== 'none') { // or whatever your display mechanism is
           odd = !odd; // toggle back and forth between odd/even
           rows[i].style.backgroundColor = odd ? '#b5bdbf' : '#5f6268'; // set color
       }
    }
}

如何获得表格奇数tr并更改样式？

1 个答案: