Change background color with jQuery

Question

I am trying to change the background color using jQuery. What am I doing wrong? I know that this can be done using CSS a lot easier, but I'm trying to do it using jQuery.

Link to jsfiddle . I am trying to change the background "Hello" to yellow.

window.onload=function(){ $('.myClass td').css({'background-color': 'yellow'}); } <table> <tr class="myClass"> <td>Hi</td> </tr> <tr> <td>Bye</td> </tr> </table> 

Answer 1

Use document.ready for your JS.

 $(document).ready(function(){ $('.myClass td').css({'background-color': 'yellow'}); }); 

Answer 2

Use $(document).ready() :

 $(document).ready(function(){ $('.myClass td').css({'background-color': 'yellow'}); }); 

See jsfiddle for a working example.

Answer 3

window.onload is probably writing something.

Try instead

 $(function(){ $('.myClass td').css({'background-color': 'yellow'}); }); 

This is a shorthand for $(document).ready .

This discusses the difference between onload and ready events.

Answer 4

Bind your function to the jQuery document.ready event:

 $(document).ready(function () { $('.myClass td').css({'background-color': 'yellow'}); }); 

Or, more briefly:

 $(function () { $('.myClass td').css({'background-color': 'yellow'}); }); 

Answer 5

 window.onload=function(){ $('.myClass td').css("background-color", "yellow"); }(); 

Just added to (); at the end to call it.

http://jsfiddle.net/p2Uwx/5/ <- updated fiddle