Question

我有一张这样的表：

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;');
    } 
  } 
}

正如Dhaval Marthak所说，我发布js小提琴：http://jsfiddle.net/T8Xe9/

Answer 1

由于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
                    }
                }
            }
        }
    }
}}()

Demo

那就是说，我会使用类和CSS的样式，而不是直接在代码中。这样做的一个优点是，只需切换css文件，就可以将代码和主题/样式重用于不同的页面。因此，如果我们使用似乎为:nth-child的relatively compatible选择器，我们就可以使用javascript：

    var x = document.getElementsByTagName("TD")
    for (var i = 0; i < x.length; i++) {
        if (x[i].className == "tdStyle") {
            x[i].setAttribute("data",x[i].innerHTML)
            x[i].innerHTML="&nbsp";
        }
    }

和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;
}

Demo

Answer 2

这是 Demo Fiddle

如果您使用的是jQuery，请使用：

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

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

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

对于奇数/偶数，

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

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

选择器基于备用奇数和偶数td。

改变背景颜色 - jQuery / Javascript

2 个答案: