Added class using javascript not working

Question

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?

All of your nth-child(1) selectors should be replaced with :first. — user229044
– user229044 ♦, Commented Apr 1, 2012 at 14:24
@Pointy, Sorry forgot to mention, the fade-table works fine, however the selected class doesn't — Namit
– Namit, Commented Apr 1, 2012 at 14:32
Oh sorry - let me play with that too then ... OK I updated the jsfiddle and it still seems to work. The this reference will be the <tr> element, not the <td>. That's because the selector you used references the <tr> explicitly. I think I know what you're getting at so I'll type in an answer. — Pointy
– Pointy, Commented Apr 1, 2012 at 14:34

Pointy · Accepted Answer · 2012-04-01 14:37:20Z

1

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.

answered Apr 1, 2012 at 14:37

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

circusbred Over a year ago

Wouldn't it make more sense to change the target of the event rather than trying to find the closest td/th?

Pointy Over a year ago

@circusbred Yes if this is all that's going on; even if not, the <tr> is pretty easy to get to, and since it's done with delegation it doesn't make much difference really.

circusbred · Accepted Answer · 2012-04-01 14:36:39Z

0

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.

http://jsfiddle.net/UNgbh/2/

answered Apr 1, 2012 at 14:36

circusbred

1,2408 silver badges8 bronze badges

Collectives™ on Stack Overflow

Added class using javascript not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related