I have this script and the rows that have td class "odd" will not toggle the blue color that the rows without the class "odd" do. anybody know why?

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

and this table

<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>

and this 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; 
}