javascript - 您如何获得表格 odd tr 并更改样式？

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
       }
    }
}