javascript - IE 7 + 8 的第 n 个子偶数和奇数

Question

如果不使用 jQuery，如何在 Javascript 或 CSS 中找到替代函数来模拟 css：

table#report tr:nth-child(odd) { background-color:#eeeeee; }

table#report tr:nth-child(even){ background-color:#ffffff; }

我不知所措，不得不为上述问题找到解决方法。

Answer 1

就我而言，我这样做了，它工作得很好

var aTr = document.getElementsByTagName("tr");
for(var i=0, ii=aTr.length; i<ii; i++){
    if(i%2!=0){
        aTr[i].style.backgroundColor = "#eeeeee";
    }else{aTr[i].style.backgroundColor = "#ffffff";}
}

Answer 2

假设基本的 JavaScript 没问题，对于功能性方法，我建议：

function oddEven(table) {
    if (!table) {
        return false;
    }
    else {
        table = table.nodeType == 1 ? table : document.getElementById(table);
        var rows = table.getElementsByTagName('tr');
        for (var i=0, len=rows.length; i<len; i++) {
            rows[i].className = i%2 == 0 ? 'even' : 'odd';
        }
    }
}

oddEven('tableID');
oddEven(document.getElementById('tableID'));

JS 小提琴演示：oddEven('tableID'); .

JS 小提琴演示：oddEven(document.getElementByID('tableID')); .

将上述函数修改为仅适用于 中的行tbody：

function oddEven(table) {
    if (!table) {
        return false;
    }
    else {
        table = table.nodeType == 1 ? table : document.getElementById(table);
        var rows = table.getElementsByTagName('tbody').length ? table.getElementsByTagName('tbody')[0].getElementsByTagName('tr') : table.getElementsByTagName('tr');
        for (var i=0, len=rows.length; i<len; i++) {
            rows[i].className = i%2 == 0 ? 'even' : 'odd';
        }
    }
}

JS 小提琴演示：oddEven('tableID'); .

JS 小提琴演示：oddEven(document.getElementByID('tableID')); .

Answer 3

这是使用 javascript 和 css 类的解决方案：

JS：

var children = document.getElementById('report').getElementsByTagName('tr');

for (var i=0, len=children.length; i<len; i++) {
  var child = children[i];
  if (i%2 === 0) {
    child.className += " even";
  } else {
    child.className += " odd";
  }
}​

CSS：

table#report tr.even {
    background: #F00; /*or the color of your choice*/
}

table#report tr.odd {
    background: #00F; /*or the color of your choice*/
}

​还有一个 jsfiddle 演示：http: //jsfiddle.net/rNTH8/2/

Answer 4

解决方法是在输出中使用交替的类名。如果您不想更改标记服务器端，可以使用 jQuery 在运行时应用这些。

Answer 5

使用 JQuery 可以毫无问题地完成

就像这样：

$('#report tr:nth-child(2n+1)').addClass('odd');