changing the tr bg color

I am having problems changing back the tr bg color.

What i am trying to do is:
on click change color
on click again chance color back and this is what i don't know what to do

this is what i have


Code:
<tr height="35px" class="a" id="1" onClick="this.className='b'">

 

I doubt if this can be done with HTML/CSS only.

You may need either a small PHP or JS routine.

 

I might be mistaken, but I believe what you are trying to achieve is called "Event Bubbling". I suggest you do a google search to learn more.

As for your request, it is possible to do this in many ways. One way I quickly thought of which may work better is to fill in the <tr> with a div which has a specific class. When you click on it, it would hide the existing div and show another in it's place. And if you click on this new div, it would make the first one appear again. Basically you are creating a loop.

You can hide the elements using css with "display:none;". I hope this helps.

 

This can't be done without JavaScript. If it was an anchor instead of a <tr>, you can almost do it using a combination of the :active and :focus pseudo-classes, but only in some browsers, and not in IE.

If you want some compact inline JavaScript to do this, the following will work:

<tr height="35" class="a" id="1" onclick="this.className=(this.className==='b')?'a':'b';">

Code (markup):

And that would assume you had something like the following included in your CSS:

tr.a  { background-color: #ffffff; } /* class 'a' = white */
tr.b  { background-color: #ff0000; } /* class 'b' = red   */

Code (markup):

No, this simple swap effect is not event bubbling per se, although event bubbling does happen normally on most DOM events, including this one. We only need to take notice of event bubbling when we have a receptive event handler attached to an ascendant element, above where the event initiated.

 

Thanks FilmFiddler that worked perfect

 

I stand corrected! Thanks for clarifying that.