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

我怎么可能在我的JavaScript代码中插入ID为“ movie”的表格的tr,并为偶数行添加背景颜色#5f6268,为奇数行添加#b5bdbf?(该代码还必须忽略tr没有显示样式)

我尝试做

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


作为测试,没有用。

最佳答案

你可以用纯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
       }
    }
}

07-24 16:10
查看更多