class on td is causing tr not to respond

Question

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?

EDIT: When you click a row (tr) it's supposed to toggle blue(.hltclick) and when you click it again it should toggle back to it's original color. For some reason the tr's that have the class .odd applied to them will not toggle blue

 //Used to make a row turn blue if available 
    $('tr:not(thead tr)').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; 
}
.odd {
background:#49484A;
}
.hltclick{
background:#00AAEC;
}

Answer 1

If your jQuery snippet is correct, your code has an error. Try:

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

I'm assuming you only want to apply this to <tr> elements in the <tbody>? If so, "tr:not(theadtr)" or "tr:not(thead tr)" are not correct. I'm not sure if this is related to your problem or not but you should correct it anyway.

Also, why apply the odd class to the table cells? Why not to the rows? It would be more accurate and less verbose.

Lastly, you haven't defined the hltclick class in the above CSS.

Answer 2

Possibly this (Note the space between thead and tr):

 $('tr:not(thead tr)').toggle(function() {
    $(this).addClass("hltclick");   },
function() {
    $(this).removeClass("hltclick");
});

Answer 3

Re: Edit and clearer question:

Actually, it is toggling the color. It's running great. The think is, as jdigital pointed out, you got these TD's stuffed infront with "odd" as a class.

Think of it like this, your toggle function opens and closes the venetian blinds on the windows, but on some windows you have these big blue curtains covering the window. How are you going to see the blinds open and close? Remove the curtains, of course.

If you want alternating colors, then you'll want those applied to the ROW. (Or in the case of the analogy, the blinds ;) )

Wanna see it in action? Click here.

Answer 4

You've given us all the CSS rules except the ones we need to solve the problem: hltclick and odd.

However, based on your description, it is likely that the odd style is overriding the hltclick style. This could be a simple ordering problem (which could be solved by moving the hltclick rule to after the odd rule) or it could be something more involved (search for css rule specificity for more information on how styles are cascaded).

It was pointed out by several posters that there is probably a rule in the JQuery selector; this is possibly true, but that would not impact this particular issue.

Also note that JQuery has an :odd selector which would allow you to eliminate the class='odd' attributes.