セレクタを使用してテーブルの行の色を変更できません

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を使用することは非常に不必要です。