класс на тд заставляет tr не отвечать

Question

У меня есть этот скрипт, и строки, которые имеют класс td "odd", не будут переключать синий цвет, который делают строки без класса "odd". кто-нибудь знает почему?

РЕДАКТИРОВАТЬ: Когда вы щелкаете строку (tr), она должна переключаться на синий (.hltclick), а когда вы нажимаете ее снова, она должна переключаться на свой первоначальный цвет. По какой-то причине три, которые имеют класс .odd, примененный к ним, не будут переключать синий

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

Answer 2

Re: Изменить и прояснить вопрос:

На самом деле, - это переключение цвета. Работает отлично. Мысль в том, что, как указал jdigital, вы получили эту инфу, наполненную «нечетным» классом.

Думайте об этом так, ваша функция переключения открывает и закрывает жалюзи на окнах, но в некоторых окнах у вас есть большие синие шторы, закрывающие окно. Как вы увидите, как открываются и закрываются жалюзи? Снять шторы, конечно.

Если вам нужны чередующиеся цвета, тогда вы захотите применить их к ROW. (Или в случае аналогии с блайндами;))

Хотите увидеть это в действии? Нажмите здесь .

Answer 3

Вы дали нам все правила CSS, кроме тех, которые нам нужны для решения проблемы: hltclick и odd.

Однако, исходя из вашего описания, вполне вероятно, что стиль odd переопределяет стиль hltclick. Это может быть простая проблема упорядочения (которая может быть решена путем перемещения правила hltclick после правила odd), или это может быть что-то более сложное (для получения дополнительной информации о специфичность правила css как каскадируются стили).

Несколько авторов указали, что, вероятно, есть правило в селекторе JQuery; возможно, это правда, но это не повлияет на эту конкретную проблему.

Также обратите внимание, что JQuery имеет селектор :odd, который позволит вам исключить атрибуты class='odd'.

Answer 4

Возможно это (обратите внимание на пробел между thead и tr):

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