更改背景颜色-jQuery/Javascript

我有一张这样的桌子：

info1    yes    no    yes    yes
info2    no     yes   no     yes
info3    no     yes   no     no
                ...

如果我看到是/否，我可以编写一些代码（见下文）来设置绿色/红色背景。但是现在我希望偶数/奇数行使用不同的绿色/红色

你知道我如何更改下面的代码，使奇数行/偶数行有不同的绿色/红色吗

var x = document.getElementsByTagName("TD")
var i=0; 
for (i=0;i<x.length;i++) 
{ 
  if (x[i].className=="tdStyle")
  { 
    if (x[i].innerHTML=="Yes") 
    { 
      x[i].style.backgroundColor='LightCoral'; 
      x[i].style.Color='LightCoral'; 
      x[i].style.border='1px solid grey';
      $(x[i]).html('&nbsp;'); 
    } 
    if (x[i].innerHTML=="No") 
    { 
      x[i].style.backgroundColor='lightgreen'; 
      x[i].style.Color='lightgreen';
      x[i].style.border='1px solid grey';
      $(x[i]).html('&nbsp;');
    } 
  } 
}

var x=document.getElementsByTagName（“TD”）
var i=0；
对于（i=0；i这里是一个

如果您使用的是jQuery，请使用以下命令：

$('table td.tdStyle:contains("yes")').css({
    "background-color":"lightgreen",
    "border":"1px solid grey",
    "color":"lightgreen"
});
$('table td.tdStyle:contains("yes")').html(' ');

$('table td.tdStyle:contains("no")').css({
    "background-color":"lightcoral",
    "border":"1px solid grey",
    "color":"lightcoral"
});
$('table td.tdStyle:contains("no")').html(' ');

选择器基于td，其中包含是或否


对于奇数/偶数

$('table td.tdStyle:odd').css({
    "background-color":"lightgreen",
    "border":"1px solid grey",
    "color":"lightgreen"
});
$('table td.tdStyle.tdStyle:odd').html(' ');

$('table td.tdStyle:even').css({
    "background-color":"lightcoral",
    "border":"1px solid grey",
    "color":"lightcoral"
});
$('table td.tdStyle:even').html(' ');

选择器基于奇偶交替td。
由于jQuery和CSS还有其他一些答案，我将提供一个完整的javascript解决方案。正如@DhavalMarthak所提到的，您可以使用模运算符
%
来知道一个数是奇数还是偶数（除以2，看看是否有余数）

因此，要添加到您的代码中，它将如下所示：

+ function () {
var tables = document.getElementsByTagName('table');
for (var k = 0; k < tables.length; k++) {
    var rows = tables[k].getElementsByTagName('tr');
    for (var j = 0; j < rows.length; j++) {
        var x = rows[j].getElementsByTagName("TD")
        for (var i = 0; i < x.length; i++) {
            if (x[i].className == "tdStyle") {
                if(j % 2 == 0 ){  //even row
                    if (x[i].innerHTML == "Yes") {
                        //td style for even yes
                    }
                    if (x[i].innerHTML == "No") { 
                        //td style for even no
                    }
                } else { //odd row
                    if (x[i].innerHTML == "Yes") {
                        //td style for odd yes
                    }
                    if (x[i].innerHTML == "No") { 
                        //td style for odd no
                    }
                }
            }
        }
    }
}}()

对于CSS：

.tdStyle[data=Yes]{
    background:lightcoral;
}

.tdStyle[data=No]{
    background:lightgreen;
}

tr:nth-child(2n) .tdStyle[data=Yes]{
    background:red;
}

tr:nth-child(2n) .tdStyle[data=No]{
    background:green;
}

检查
tr的长度，并将其模块化为2！请参见
if（行的长度%2==0）然后偶数奇数
发布你当前代码的js小提琴！这实际上没有回答问题，因为它不使用OP的代码，也没有提供4种不同的颜色。@shaunakde。这不起作用。我需要选择是/否和偶数/奇数。所有的是/奇数、是/偶数、否/奇数、否/偶数都需要一种颜色。你能详细说明颜色组合吗是/奇数、是/偶数、否/奇数和否/偶数上的离子/事件？我无法添加CSS。这是程序中的一个现有表，我只能通过上面的代码更改布局。目前您的代码不起作用。我不知道为什么…@endeka Hm。是否可以发布表的html？每页是否有多个表？代码是“正在工作”。问题是，他认为每一行都很奇怪……这是一个SharePoint表。我可以在哪里发布html？在JSFIDLE上？但可能SharePoint读取的代码不同……我想如果您有代码片段，您可以将其添加到您的问题中。我可能会尝试选择每个表，然后选择
table.getElementsByTagName（“tr”）
从那里开始。可能有一个类附加到表中？Firefox有一个“查看选定源”“如果您选择了应该可以看到动态表的表。同样，您可以在web inspector中选择一个元素，然后在chrome中复制该元素。表的代码非常长，因此我认为将其发布到此处不是一个好主意。目前反浏览器没有看到奇数行和偶数行之间的差异。它总是使用最后一个'x[I]。innerHTML==“是”或“x[i].innerHTML==“否”'
.tdStyle[data=Yes]{
    background:lightcoral;
}

.tdStyle[data=No]{
    background:lightgreen;
}

tr:nth-child(2n) .tdStyle[data=Yes]{
    background:red;
}

tr:nth-child(2n) .tdStyle[data=No]{
    background:green;
}