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

Question

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

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