Question

我正在研究替代背景颜色并面临一些挑战。我想通过CSS或JavaScript / jQuery将备用背景颜色设置为ODD行。在小提琴中，我故意隐藏了偶数行，因为要求是相同的。我试图使用jQuery实现它，但无法继续进行。请大家不建议我用DIV替换TABLE。不幸的是我正在研究旧标记（Intranet网站）。现有的HTML标记可以提供帮助/指导。

    if($('table tr').hasClass('odd')){
        $(this).find('td :first-child').css('background','yellow');
    }

修改

对于所有蓝色背景..我想将这些背景颜色更改为奇数或偶数的替代？我觉得现在很清楚了吗？

New JSFiddle

Answer 1

你不必使用脚本。

查看CSS even/odd rule.

您可以为所有偶数/奇数tr指定背景颜色。

Working Fiddle

只需将其添加到 CSS ，然后丢失脚本。

tr.odd tr:nth-child(even) /*or [odd] if you need*/
{
    background-color:yellow;
}

另外，如果您打算使用这种颜色，请将background规则更改为background-color。

<强>更新

从你的评论中，我知道你只想选择奇数类的奇数表。（这个问题非常不清楚）

所以：请参阅此Updated Fiddle

tr.odd:nth-child(4n+1)
{
    background-color: yellow;
}

Answer 2

如果您的奇数表行已经具有“奇数”类，那么您可以将普通CSS应用于“奇数”类。

如果您需要在奇数行中更改第一列的背景颜色，您可能希望使用td:first-of-type而不是第一个孩子。

Answer 3

这样的事情怎么样：

$('table tr:visible:odd').css('background','yellow');

jsFiddle

如果甚至行可见性没有变化，'：visible'选择器也是多余的。

Answer 4

您可以使用object:nth-child(even)（或奇数）。

http://jsfiddle.net/5dgJ3/3/

Answer 5

我刚刚做了类似的事情，但我用了一个类来添加“奇怪”的样式。

$(function() {
    $("table tr:odd").addClass("odd");
});

如果您想添加比BG颜色更多的样式，可能会更简单一些。

Answer 6

我想我终于明白了。你希望每个其他tr.odd都有不同的背景颜色。以下是如何使用jQuery（如果您需要支持旧版本的IE）：

$('tr.odd:even').css('background','yellow');

Answer 7

我可能会放弃“奇怪”类，因为它提供有限的语义含义，只需让jQuery应用该类然后让css做样式。

选项1

jQuery：

$('tr:nth-child(odd)').addClass('odd');

CSS：

.odd {
    background-color:#f7f7f7;
}

示例：

http://jsfiddle.net/gyrostu/eY2WQ

选项2

纯CSS：

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

W3C Web Style Sheets CSS tips & tricks

Answer 8

 $(document).ready(function () {
        $("tr:odd", "#adminMessageId").css("background-color", "SkyBlue");

        $("input").focus(function () {
            $(this).css("background-color", "#cccccc");
        });
        $("input").blur(function () {
            $(this).css("background-color", "#ffffff");
        });

行的备用背景颜色

8 个答案: