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

我有一个表，从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为好，但似乎没有任何工作。我哪里错了？

来源

2016-12-14 Tatws24

您试图在元素存在之前将样式应用于元素。

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

但这就是说，使用JS这是非常不必要的。只是在CSS中包含一个简单的规则来为你照顾：

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

来源

2016-12-14 20:52:08 Santi

嗨，感谢您的回复。我已经把脚本放在我的代码的底部，但它仍然不起作用。我知道这样做是不必要的，但这是为了jscript的任务，这就是为什么我这样做。我只是不确定为什么它不起作用。 – Tatws24

将它移动到脚本底部不会解决问题。创建元素的代码使用AJAX，它是* aynchronous *，这意味着下一行代码被触发*而无需等待AJAX完成*。在完成时，AJAX调用的'success：'部分中的任何内容都会运行，因此您需要在'drawTable（data，2）;'之后放置该行。 – Santi

太棒了。非常感谢。 – Tatws24

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

回答

相关问题

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