In an attempt to build an online file manager, I needed some cool UI tricks. Want I had in mind was similar to what hotmail uses for their message listings. Basically, you would have a list of files and you could click on them and they would select/deselect (with a checkbox beside it). After a lot of surfing, swearing and cursing, I got a simple onClick handler but for some reason it would only change select and not deselect (change the color back). Since I recently discovered the joys of CSS, my next step was obvious and after plenty more surfing and cursing, I finally figured it.. Behold!!
<style type="text/css">
.blue{
background-color:blue;
color: aliceblue;
}
.red{
background-color:red;
color: white;
}
</style>
<tr class ="blue"
onClick="document.foo.bar.checked = !document.foo.bar.checked; this.className = this.className == 'blue' ? 'red' : 'blue'; ">
<form name="foo">
<td>
<input type="checkbox" name="bar">
Test
</td></form></tr>
</table>
