jQuery and GridView : How to highlight current row/current cell on mouseover ?

It is particularly very simple to highlight a row /highlight a gridview cell on mouseover.

GridView can be access by its ID as a table and its row can be accessed as a "tr", its cell can be accessed as "tr td", in the simplest case.

So I can have something like following to change the color of a row on mouseover, and recover the color on mouseout :


$(document).ready(function() {
                             $("#GridView1 tr").mouseover(function() { $(this).css("background-color", "Red"); }).mouseout(function() { $(this).css("background-color", "White"); });
             
           });


The same can be done for a cell simply by changing "tr" to "tr td" :


$(document).ready(function() {
                             $("#GridView1 tr td").mouseover(function() { $(this).css("background-color", "Red"); }).mouseout(function() { $(this).css("background-color", "White"); });
             
           });



"#GridView1 tr td" can be literally interpreted as "for each td in each tr in a parent element named GridView1"

Same way code can be written for click event also:

$(document).ready(function() {
               alert("hello");
               $("#GridView1 tr").mouseover(function() { $(this).css("background-color", "Red"); }).mouseout(function() { $(this).css("background-color", "White"); });
               $("#GridView1 tr").click(function() { $(this).css("background-color", "Green"); });              
           });





This code was tested using jquery-1.7.2 :
 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>