jquery - td 上的类(class)导致尝试不响应

Question

我有这个脚本，具有 td 类“奇数”的行不会像没有类“奇数”的行那样切换蓝色。有人知道为什么吗？

编辑:当您单击一行 (tr) 时，它应该切换为蓝色 (.hltclick)，当您再次单击它时，它应该切换回其原始颜色。出于某种原因，应用了 .odd 类的 tr 不会切换为蓝色

 //Used to make a row turn blue if available 
    $('tr:not(thead tr)').toggle(function() {
        $(this).addClass("hltclick");   },
    function() {
        $(this).removeClass("hltclick");
    });

还有这张表

<table>
  <thead>
     <tr class="border">
       <td>Start Time</td>
       <td>End Time</td>
     </tr>
  </thead>
  <tbody>   
     <tr class="border">
       <td class="odd"><a href="#">7:00am</a></td>
       <td class="odd"><a href="#">8:00am</a></td>
     </tr>
     <tr class="border">
        <td><a href="#">8:00am</a></td>
        <td><a href="#">9:00am</a></td>
     </tr>
     <tr class="border">
        <td class="odd"><a href="#">9:00am</a></td>
        <td class="odd"><a href="#">10:00am</a></td>
      </tr>
      <tr class="border">
        <td><a href="#">10:00am</a></td>
        <td><a href="#">11:00am</a></td>    
      </tr>
      <tr class="border">
        <td class="odd"><a href="#">11:00am</a></td>
        <td class="odd"><a href="#">12:00pm</a></td>
      </tr>
      <tr class="border">
        <td><a href="#">1:00pm</a></td>
        <td><a href="#">2:00pm</a></td>
      </tr>
      <tr class="border">
        <td class="odd"><a href="#">2:00pm</a></td>
        <td class="odd"><a href="#">3:00pm</a></td>
      </tr>
      <tr class="border">
        <td><a href="#">3:00pm</a></td>
        <td><a href="#">4:00pm</a></td>
      </tr>
      <tr class="border">
        <td class="odd"><a href="#">4:00pm</a></td>
        <td class="odd"><a href="#">5:00pm</a></td>
      </tr>
   </tbody>
</table>

和这个CSS

#calendar {
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px; padding:15px; 
  clear:both; padding:15px;
} 
body { 
  color:#222222;
  font-family:sans-serif;
  font-size:12px; 
} 
table  { 
  border:1px
  solid white; 
  border-collapse:collapse;
  margin:0 0 30px; 
  width:100%; 
}
.border  {
  border:1px solid #333134; 
}
thead tr {
  background:none repeat scroll 0 0 #B7EBFF; 
  color:#333134; 
  font-size:24px; 
  font-weight:bold; }
tr {
  background:none repeat scroll 0 0 #616062; 
  font-size:16px; 
} 
thead td {
  font-family:"Century Gothic",Arial;
  padding:5px 0 20px 5px; 
}
tr.border thead tr {
  color:#333134; font-size:24px;
  font-weight:bold; 
}  
tr { 
  font-size:16px; 
}
.odd {
background:#49484A;
}
.hltclick{
background:#00AAEC;
}

Answer 1

如果您的 jQuery 片段是正确的，则您的代码有错误。尝试:

$("tbody > tr").toggle(function() {
  $(this).addClass("hltclick");
}, function() {
  $(this).removeClass("hltclick");
});

我假设您只想将其应用于 <tr> <tbody> 中的元素？如果是这样，"tr:not(theadtr)"或 "tr:not(thead tr)"不正确。我不确定这是否与您的问题有关，但无论如何您都应该更正它。

此外，为什么应用 odd类到表格单元格？为什么不去行？它会更准确、更简洁。

最后，您还没有定义 hltclick上面 CSS 中的类。