Reputation: 1322
I am adding two classes using javascript on my table, the css for the classes is:
//using less
.fade-table {
background-color: #fff;
opacity: 0.5;
&:hover {
opacity: 1;
}
}
.selected {
opacity: 1;
}
what i am trying to achieve here is that, my table fades at the opacity: 0.5
and the selected cell is applied with the selected
class which highlights the selected cell.
The javascript being used is:
$("#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");
});
However for some reason after adding the fade-table
class the script doesn't apply the selected
class to the td
. The obvious reason that i can think of is that this doesn't represent the td so o also tried $(this).closest("td").addClass("selected");
. However this doesn't seem to work either.
Any suggestions on how this might work?
Upvotes: 1
Views: 86
Reputation: 413682
If you want to apply "selected" to the <td>
that was clicked on, try:
$("#pending_states table tr").live("click",function(e){
$("#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);
($(e.target).is('td') ? $(e.target) : $(e.target).closest('td')).addClass("selected");
});
(or something less ugly). The idea is to use the event parameter to find the actual target of the click.
Upvotes: 1
Reputation: 1240
You are setting opacity on the wrong element. fade-table
is applied to the cell, but selected is applied to the row, so the cell will still be set at 50% opacity.
Upvotes: 0