<th> change background on click with javascript

Question

I am trying to make it when the user clicks inside this <th> element, that it changes the background-color of the <th> .

I have the hover finished, but for some reason when it clicks the <th> , it does not keep the prescribed background. Here's the 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>

Here's the 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; }

And finally the good 'ol Javascript:

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

Why is it not changing the background-color?

Cheers!

Answer 1

tr th .active应tr th.active ，因为你正在寻找th与类元素active ，而不是后裔th具有类active 。