Question

我有一个表，通过Ajax调用从JSon文件填充。很简单，我想改变奇数/偶数表行的背景颜色。

该表位于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;
}

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

1 个答案: