Added class using javascript not working
<p>I am adding two classes using javascript on my table, the css for the classes is:</p>

<pre><code>//using less
.fade-table {
    background-color: #fff;
    opacity: 0.5;
    &amp;:hover {
        opacity: 1;
    }
}

.selected {
    opacity: 1;
}
</code></pre>

<p>what i am trying to achieve here is that, my table fades at the <code>opacity: 0.5</code> and the selected cell is applied with the <code>selected</code> class which highlights the selected cell.</p>

<p>The javascript being used is:</p>

<pre><code>$("#pending_states table tr").live("click",function(){
    $("#pending_states table").css({width: "140px"});
    $("#pending_states td:nth-child(1), #pending_states th:nth-child(1)").addClass("fade-table");
    $("#pending_states td:nth-child(1), #pending_states th:nth-child(1)").css({width: "140px"});
    $("#pending_states").animate({ marginLeft: "4px"}, 200);
    $(this).addClass("selected");
});
</code></pre>

<p>However for some reason after adding the <code>fade-table</code> class the script doesn't apply the <code>selected</code> class to the <code>td</code>. The obvious reason that i can think of is that this doesn't represent the td so o also tried <code>$(this).closest("td").addClass("selected");</code>. However this doesn't seem to work either.</p>

<p>Any suggestions on how this might work?</p>
