<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');
    });
});

为什么它不改变背景颜色？

干杯!

Answer 1

tr th .active应该为tr th.active，因为您要查找的是具有active类的th元素，而不是具有active类的th的后代元素。