CODEWITHSUNDEEP
jquerycssjquery-selectors
dbz
dbz

Reputation: 284

jquery selectors second selector not working

I cannot understand why the second $("tr:even").css("color","yellow"); doesn't work when the first one works correctly.

$(document).ready(function(){
    $("#button61").click(function(){
        $("tr:even").css("background-color","purple");
        $("tr:even").css("color","yellow");
    });
});

Upvotes: 0

Views: 75

Answers (3)

Bishal Santra
Bishal Santra

Reputation: 3

I checked the code, it's alright. Make sure you didn't do any typos. Otherwise explain it clearly if u still have problem. Check console(press F12) for script errors..

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

you should apply the style to the table cells (since they cover the row) :

$("tr:even td").css({ "background-color": "purple", "color" : "yellow" });

as a sidenote: use css() method just once with an object as argument, or even better just assign a classname like so

$("tr:even").addClass('highlight');

and define your style in the css

.highlight td {
   background-color: purple;
   color: yellow;
}

so you can keep off css from javascript, for an improved code mantainance.

Upvotes: 7

Grim...
Grim...

Reputation: 16953

It does work - here's a demo of the following JS: http://jsfiddle.net/Grimdotdotdot/UySzs/

$(document).ready(function(){
    $("#button61").click(function(){
        $("tr:even").css("background-color","purple");
        $("tr:even").css("color","yellow");
    });
});

But like others have said, just do it all in one line.

Upvotes: 0

Related Questions