Question

我在表格中有以下替代颜色：

#grid tr:nth-child(odd)    { background-color:#eee; }
#grid tr:nth-child(even)   { background-color:#fff; }

但是，这适用于Firefox，但不适用于IE8。经过一些研究，我尝试了以下内容：

CSS：

#grid tr.odd    { background-color:#eee; }
#grid tr.even   { background-color:#fff; }

jQuery的：

$(document).ready(function() {
    $("#grid tr:nth-child(even)").addClass("even");
    $("#grid tr:nth-child(odd)").addClass("odd");
});

但它不起作用（实际上，它甚至在Firefox中都不起作用）。我还能做什么的想法（不必使用第三方js，如Selectivizr）？

谢谢！

Answer 1

我会这样做： CSS：

#grid tr {background-color: red;}
#grid tr:nth-child(even),
#grid tr.even { background-color:green;}

JS：

$(document).ready(function(){
    $('#grid tr:odd').addClass('even');
}

Answer 2

我能够通过循环遍历每个tr元素并使用基于奇数/偶数的索引添加类来使用jQuery工作

我使用IE8的测试网络应用程序测试，然后我将我的代码从测试应用程序复制到jsFiddle。只是意识到jsFiddle与IE8无法正常工作。

<强> WORKING JSFIDDLE

JS：

$(function () {
    $('tbody').children().each(function (index) {
        var row = $(this);
        if ((index + 1) % 2 === 0) {                
            row.addClass("even");
        } else {                
            row.addClass("odd");
        }
    });
});

HTML：

<table id="grid">
    <thead>
        <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td>Col 3</td>
            <td>Col 4</td>
            <td>Col 5</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
    </tbody>
</table>

不能让nth-child使用IE8

2 个答案: