行的备用背景颜色答案

【问题标题】：Alternate background color for rows行的备用背景颜色
【发布时间】：2013-09-11 14:30:51
【问题描述】：

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

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

编辑

对于所有蓝色背景.. 我想将这些背景颜色更改为奇数还是偶数？我想现在很清楚了吗？

New JSFiddle

【问题讨论】：

从不同的答案可以看出，你的问题是模棱两可的......如果我对你想要的猜测是正确的，并且“奇数”和“偶数”类真的像在你的例子，你可以使用nth-of-type(4n+1)。见updated fiddle。
感谢您的解决方案。但是对于偶数行 - 显示设置为无并且它是动态发生的，我无法控制它。我已经编辑了需求。
我仍然很难理解您想要实现的目标。您的 css 正在使 tr.odd 蓝色和 tr.even 红色并隐藏。你想让什么变黄？ H2?你还想做什么？
#Peter jsfiddle.net/5dgJ3/6 你能看到所有蓝色背景吗？我想将这些背景颜色更改为奇数或偶数？我想现在清楚了吗？

标签： javascript html css

【解决方案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。

更新：

从您的 cmets 中，我了解到您只想选择奇数类的奇数表。（问题很不清楚）

所以：看到这个Updated Fiddle

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

【讨论】：

我已经知道了，你的建议是什么。如果您能满足我的要求，将不胜感激。谢谢。
我为你准备了一把小提琴。
基本上要求是 ODD td - 我希望备用（偶数）背景颜色与 TD 内的内容（表格）一起改变
jsfiddle.net/5dgJ3/6 你能看到所有蓝色背景吗？我想将这些背景颜色更改为奇数或偶数？我想现在清楚了吗？
我想我终于明白你想要什么了。检查更新的答案。下次尝试更清楚地解释自己（用图片或其他东西）

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

这样的事情怎么样：

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

jsFiddle

如果行的可见性没有改变，':visible' 选择器是多余的。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

我可能会放弃“奇数”类，因为它提供有限的语义含义，只需让 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

【讨论】：

【解决方案7】：

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

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

【讨论】：

基本上要求是 ODD td - 我希望备用（偶数）背景颜色与 TD 内的内容（表格）一起改变

【解决方案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");
        });

【讨论】：