how to select a row in a table according to checkbox column

Question

Using Asp.net and jQuery I have a GridView with a CheckBox column. Right now I have code that highlights (green) a row whenever the mouse goes over it (and unhighlights (yellow) on mouse out). I would like to add the ability to highlight it a different color (pink) whenever the checkbox in that row is checked.

My problem is that after checking the box and the row highlights pink, when I mouse out, the row returns to the original color (yellow). How can I make the row with the checkbox not react to the mouse out code?

Answer 1

You can add a css class something like "userSelected" to your selected row. Modify your css/code to show hilighther color or default color so that they will be applied only for the rows which doesn't contain "userSelected" css class.

Answer 2

Here is some example code:

$( function() {
 $( 'tr' ).hover( 
  function() {
   $( this ).addClass( "hover-highlight" );
  },
  function() {
   $( this ).removeClass( "hover-highlight" );
  }
 );
 $( 'tr.checkcolumn input' ).click( function() {
   $( this ).parents( "tr" ).addClass( "checked-highlight" );
 });
});

And some css:

tr { background-color: yellow; }
tr.hover-highlight { background-color: green; }
tr.checked-highlight { background-color: pink!important; }