css - 无法使第 n 个孩子与 IE8 一起工作

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 上正常工作。

工作 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>