设置一个表格，其单元格的背景颜色因光线，中度和暗度而异。任何给定单元格的背景颜色都基于其行和列的数量。奇数行和奇数列的单元格很轻;奇数行和偶数列中的单元格甚至行和奇数列都是中等的;偶数行和偶数列中的单元格都是暗的。
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';}
}
}
您可以在jQuery上使用：odd和：even选择器来遍历表的行和单元格，如下所示：
var cssColorArr = ["#FCE9D8", "#F9D5B2", "#F7C08B"];
$("#yourTableId>tbody>tr:odd").each(function(i, elm){
$(elm).style("background-color", cssColorAttr[0]);
$(this).find("td:odd").style("background-color", cssColorAttr[1]);
$(this).find("td:even").style("background-color", cssColorAttr[2]);
});
$("#yourTableId>tbody>tr:even").each(function(i, elm){
$(elm).style("background-color", cssColorAttr[1]);
$(this).find("td:odd").style("background-color", cssColorAttr[1]);
$(this).find("td:even").style("background-color", cssColorAttr[2]);
});
我还没有测试过，但我认为你明白了。
试试这个，虽然浏览器支持可能不是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");
我在这里回答我自己的问题......经过几个小时的试验和错误，并阅读其他人的回答，我认为这是一个很好的解决方案。对不起，如果这听起来像我在第二个人说话。
忘记向单元格添加单独的单元格类。由于每个单元格的样式取决于位置，因此如果td移动（尽管有separate content and container范例），您希望样式更改。而且，这个CSS更容易，更易于维护。
.table-grid .row-odd .column-odd {/* light */}
.table-grid .row-odd .column-even,
.table-grid .row-even .column-odd {/* medium */}
.table-grid .row-even .column-even {/* dark */}
在jQuery中，您必须确保每次点击新行时“重新开始”计数。如果您刚刚使用了$('tr td:odd')，那么它将构建一个包含所有tds中所有奇数trs的数组，该数组将继续跨行。你想要的是为每个td选择奇怪的trs。
解决这个问题的方法是在包装器对象上使用for循环。下面的JS循环遍历$('tbody')对象（包含tbodys的数组）。然后它从每个单独的tbody构造一个新的jQuery对象，得到它的子（trs）具有奇数和偶数的限制，然后将类添加到那些trs。此循环确保每个tbody的奇偶校验（奇数和均匀度）“重新启动”。如果你有多个tbodys（在一个或单独的tables中），第一行的样式将始终相同。
for (var i=0; i<$('.table-grid tbody').size(); i++) {
var jQobj = $($('.table-grid tbody').toArray()[i]);
jQobj.children('tr:even').addClass('row-odd');
jQobj.children('tr:odd').addClass('row-even');
}
下面的JS循环做同样的事情：它为每个td选择奇数和偶数trs，在每一行重新启动奇偶校验。如果您有多行，则第一个单元格看起来总是相同。
for (var i=0; i<$('.table-grid tr').size(); i++) {
var jQobj = $($('.table-grid tr').toArray()[i]);
jQobj.children('td:even').addClass('column-odd');
jQobj.children('td:odd').addClass('column-even');
}
旁白：你可能想知道，“你为什么要向tr:even和td:even添加'奇怪'类？”嗯，这是因为jQuery :even和:odd选择器是从零开始的，这意味着:even选择索引为0,2,4等的元素，这意味着第一个，第三个，第五个等元素。如果CSS艺术家希望第一，第三，第五个元素有一个包含单词“odd”的类（这是合理的，没有？），那么JS程序员必须切换它。
下面是你如何使用JQuery做到这一点
$("td:odd",$("tr:odd")).addClass("cell-odd-odd");
$("td:even",$("tr:odd")).addClass("cell-odd-even");
$("td:odd",$("tr:even")).addClass("cell-odd-even");
$("td:even",$("tr:even")).addClass("cell-even-even");
请注意，这将导致每个元素的重排，您可能希望将表添加到文档片段，并在将其添加回页面之前对其执行操作。