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 と 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 3

基本的な 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 デモ:oddEven('tableID'); .

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

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

Answer 4

回避策は、出力で交互のクラス名を使用することです。マークアップサーバー側を変更したくない場合は、jQueryを使用して実行時にこれらを適用できます。

Answer 5

JQueryを使用すると、これは問題なく実行できます

そのように：

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