Change colour of table row onclick

Question

I have created a table having rows with alternating colours(say yellow and red). Now, I want to change the colour of the clicked row to one common colour(say blue).And revert back to its original colour when clicked again. I'm able to change the colour using this code

$("#mainTable").find('#'+IDClicked).css("background-color", "#bbbbff");

I'm not able to figure out how to revert back.

Answer 1

We assume that your code this this way:

HTML

<table id="rowClick">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>

In that case, you can use jQuery this way:

$(document).ready(function(){
    $("#rowClick > tr").click(function(){
        $(this).toggleClass("active");
    });
});

And finally the CSS part:

table tr.active {background: #ccc;}

Fiddle: http://jsbin.com/icusec/2