<th> изменить фон при нажатии на javascript

Question

Я пытаюсь сделать это, когда пользователь нажимает внутри этого элемента <th>, что он меняет фоновый цвет <th>.

У меня есть наведение завершено, но по какой-то причине, когда он нажимает <th>, он не сохраняет заданный фон. Вот HTML:

<table cellspacing="0" cellpadding="0" id="bin" width="100%"> 
     <thead> 
      <tr> 
      <a href="#"><th style="text-align:left; padding-top: 20px;" width="10%" id="row-1">Symbol <img src="/images/sort-arrow-up.png" title="Sort by Symbol" alt="Sort by Symbol" class="sort-right move-left bottom-image" id="image1"/></th></a> 
      <th style="text-align:left;" width="20%" id="row-2">Company<br><span class="move_right">Name</span> <img src="/images/sort-arrow-up.png" title="Sort by Company Name" alt="Sort by Company Name" class="sort-right move-left" id="image2"/></th> 
      <th style="text-align:center;" width="12%" id="row-3"><span class="center-text">Buy</span><br>Date <img title="Sort by Buy Date" src="/images/sort-arrow.png" alt="Sort by Buy Date" id="image3"/></th> 
      <th style="text-align:center;" width="10%" id="row-4"><span class="center-text">Buy</span><br>Price &nbsp;<img title="Sort by Buy Price" src="/images/sort-arrow.png" alt="Sort by Buy Price" id="image4"/></th> 
      <th style="text-align:center;" width="9%" id="row-5"><span class="center-text">Closed</span><br>Price &nbsp;<img title="Sort by Closed Price" src="/images/sort-arrow.png" alt="Sort by Closed Price" id="image5"/></th> 
      <th style="text-align:center;" width="9%" id="row-6"><span class="center-text">Closed</span><br>Date &nbsp;<img title="Sort by Closed Date" src="/images/sort-arrow.png" alt="Sort by Closed Date" id="image6"/></th> 
      <th style="text-align:center;" width="10%" id="row-7"><span class="center-text">Total</span><br>Return &nbsp;<img title="Sort by Current Return" src="/images/sort-arrow.png" alt="Sort by Current Return" id="image7"/></th> 
     </tr> 
    </thead> 
    <tbody> 

Вот CSS:

table#bin, table#fallen, table#growth, table#turn { margin:10px 0; border:1px solid #ccc; } 
th, td { padding:10px 7px; } 
tr th { background:#ededed; color:#545454; font-weight:bold; cursor:pointer;} 
tr th:hover{ background-color: #CCCCCC;} 
tr th.active 
{ 
    background-color: #7DAFFF;!important 
} 
#bin tr.even td { background:#e1eff1; } 
#turn tr.even td { background:#f7f2d8; } 
#fallen tr.even td { background:#f2dcbd; } 
#growth tr.even td { background:#deefdc; } 
td.title a { text-decoration:none; display:block; text-transform:uppercase; font-weight:bold;} 
#bin td.title { background:#5198a0; } 
#fallen td.title { background:#e6a850; } 
#turn td.title { background:#ebd870; } 
#growth td.title { background:#6ab065; } 
#bin td.title a { color:#182c2e; font-size:13px;} 
#fallen td.title a { color:#352713; font-size:13px;} 

#turn td.title a { color:#37321a; font-size:13px; } 
#growth td.title a { color:#233d21; font-size:13px;} 
hr { border:2px dotted #ccc; border-bottom:none; } 
#tooltip { position:absolute; z-index:3000; border:1px solid #111; background-color:#eee; padding:5px; } 
#tooltip h3, #tooltip div, #tooltip p { margin:0; } 

И, наконец, хороший «ол JavaScript:

$(function(){ 
    $('#bin').on('click', 'th', function(){ 
     $(this).parent().children().removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

Почему не меняется цвет фона?

Cheers!

Answer 1

tr th .active должен быть tr th.active, так как вы ищете th элементов с классом active, а не потомки th, которые имеют класс active.