Highlight the GridView row when you mouse-hover

Recently while working on a ASP.Net MVC project, I needed to display data in a GridView of one of the Views. I also wanted to highlight each row, as I moved my mouse over the rows of the grid.

I got to the rescue with JQuery. This is awesome, it lets you do these kind of stuffs fairly easy. Think like javascript, but needs a little different syntax. This is how it got to working:

<script type="text/javascript">
  $(document).ready(function () {
    $("tr").filter(function () {
         return $('td', this).length && !  $('table', this).length
    }).css({background: "#FFFFFF" }).hover(
     function () { $(this).css({ background: "#EEFF77" }); },
                function () { $(this).css({ background: "#FFFFFF" }); }
                );
        });
    </script>

Technorati Tags: JQuery,GridView,Row,Highlight,Mouse,Over