javascript - 使用 jQuery 和 CSS 根据行和列的奇偶性设置表数据单元格的样式

Question

这就是我想做的事情:

设置单元格背景颜色为浅色、中色和深色的表格样式。任何给定单元格的背景颜色都基于其行数和列数。奇数行奇数列的单元格较亮；奇数行偶数列或偶数行奇数列的单元格为中；偶数行和偶数列中的单元格都是黑色的。

这是我想要的样子:

这是我的算法:

A. For each Row, assign an index;
B. For each Column, assign an index;
C. For each Cell, {
    I. Get the index of this Cell's Row;
    II. Get the index of this Cell's Column;
    III. If (both indices are odd) {add class '.cell-odd-odd';}
    IV. Else If ((parent Row is odd && parent Column is even) ||
                (parent Row is even && parent Column is odd)) {
                    add class '.cell-odd-even';
                }
    V. Else If (both parents are even) {add class '.cell-even-even';}
    VI. Else {do nothing;}
    }

现在，我如何使用 CSS 和 JavaScript/jQuery 来做到这一点？

编辑:这可能是一个更好的算法:

A. For each Row, assign an index;
B. For each Column, assign an index;
C. For each Cell, {
    I. Get the index of this Cell's Row;
    II. Get the index of this Cell's Column;
    III. If (parent Row is odd) {
             If (parent Column is odd) {add class '.cell-odd-odd';}
             Else {add class '.cell-odd-even';}
         } Else {
             If (parent Column is odd) {add class '.cell-odd-even';}
             Else {add class '.cell-even-even';}
         }
    }

Answer 1

尝试一下这个，尽管浏览器支持可能不是 100% 的水平:

tr:nth-child(odd) td:nth-child(odd)
{
    background:pink;
}

tr:nth-child(odd) td:nth-child(even)
{
    background:purple;
}

tr:nth-child(even) td:nth-child(odd)
{
    background:purple;
}

tr:nth-child(even) td:nth-child(even)
{
    background:brown;
}

Javascript版本:

$("tr:odd td:odd").addClass("cell-odd-odd");
$("tr:odd td:even").addClass("cell-odd-even");
$("tr:even td:odd").addClass("cell-even-odd");
$("tr:even td:even").addClass("cell-even-even");