无法使用选择器更改 table 行颜色

Question

我有一个 table，通过 Ajax 调用从 JSon 文件填充。很简单，我想更改 odd/even table 行的背景颜色。

table 在 Jquery 选项卡内；这会有什么不同吗？

        $(document).ready(function(){

       // $("#table tr:odd").css('background-color', 'red'); <!-- None of these appear to work -->
        $("tr:odd").css("background-color","#eee");





    // ***--- SPANISH MENU ---***

        $.ajax({ 
        url:     "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php", 
        dataType: 'jsonp',
        success: function (data) {
            drawTable(data, 2);
            }               
        });
    // ***--- CREATE TABLE ---***

        function drawTable(data, table_number) {
            for (var i = 0; i < data.length; i++) {
                drawRow(data[i], table_number);
            }
        }

    // ***--- CREATE ROW ---***

        function drawRow(rowData, table_number) {
            var row = $("<tr />")
            $("#table" + table_number).append(row);
            row.append($("<td>" + rowData.course + "</td>"));
            row.append($("<td>" + rowData.name + "</td>"));
            row.append($("<td>" + rowData.price + "</td>"));
        }

HTML:

    <div id="tabs">
            <ul>
                <li><a href="#tab-1">Italian</a></li>
                <li><a href="#tab-2">Spanish</a></li>
            </ul>

            <div id="tab-1">
            <table id='table1' border="1" cellpadding="15">
                    <tbody></tbody>
                </table>    
            </div>
      </div>

我也尝试过 .addclass，但似乎也不起作用。我哪里错了？

Answer 1

您正试图在元素存在之前将样式应用到这些元素。

$("tr:odd").css("background-color","#eee"); 将查找所有奇数行，但因为它是代码的第一行（并且这些行直到稍后才添加），所以它不会找到任何东西。如果你想这样做，你必须在 drawTable() 完成并且所有行都存在后更改颜色。

但话虽如此，为此使用 JS 是非常不必要的。只需在 CSS 中包含一个简单的规则即可为您解决此问题：

tr:nth-child(odd) {
    background: #eee;
}

无法使用选择器更改 table 行颜色

Unable to use selector to change table row colour

jquery

jquery-selectors