javascript - 更改背景颜色 - jQuery/Javascript

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 fiddle: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