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 Fiddle demo: oddEven('tableID');

JS Fiddle demo: 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 Fiddle demo: oddEven('tableID');

JS Fiddle demo: oddEven(document.getElementByID('tableID'));

Answer 3

这是一个使用javascript和css clases的解决方案：

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

对于IE 7 + 8，nth Child偶数和奇数

5 个答案: