Question

Making a quick JQuery demo where clicking a table element changes it from black to white. I start them out checkered. However, they always turn black when I click them, and I cannot get them to turn back to white. What am I doing wrong here?

$('table tr td').click(function() {
    if($(this).css('background-color') == 'black')
        $(this).css('background-color', 'white');
    else
        $(this).css('background-color', 'black');
});

Answer 1

The css() method returns a RGB color (vendor-specific!). So, use the following code instead:

    if($(this).css('background-color') == 'rgb(0, 0, 0)') //rgb(0,0,0) = black

---

A better, easier-to-maintain method to change the appearance can be achieved by using the toggleClass method:

/* CSS code*/
.black {background-color: black;}
.white {background-color: white;}
/* JavaScript*/

$('table tr td').click(function() {
   $(this).toggleClass("black white");
});