jquery gridview mouseover highlight table row

by ravimallya

HTML

<table class="mGrid">
  <tr>
    <th>Entry Header 1</th>
    <th>Entry Header 2</th>
    <th>Entry Header 3</th>
    <th>Entry Header 4</th>
  </tr>
  <tr>
    <td>Entry First Line 1</td>
    <td>Entry First Line 2</td>
    <td>Entry First Line 3</td>
    <td>Entry First Line 4</td>
  </tr>
  <tr class="alt">
    <td>Entry Line 1</td>
    <td>Entry Line 2</td>
    <td>Entry Line 3</td>
    <td>Entry Line 4</td>
  </tr>
  <tr>
    <td>Entry Last Line 1</td>
    <td>Entry Last Line 2</td>
    <td>Entry Last Line 3</td>
    <td>Entry Last Line 4</td>
  </tr>
     <tr class="alt">
    <td>Entry Line 1</td>
    <td>Entry Line 2</td>
    <td>Entry Line 3</td>
    <td>Entry Line 4</td>
  </tr>
     <tr>
    <td>Entry First Line 1</td>
    <td>Entry First Line 2</td>
    <td>Entry First Line 3</td>
    <td>Entry First Line 4</td>
  </tr>
  <tr class="alt">
    <td>Entry Line 1</td>
    <td>Entry Line 2</td>
    <td>Entry Line 3</td>
    <td>Entry Line 4</td>
  </tr>
  <tr>
    <td>Entry Last Line 1</td>
    <td>Entry Last Line 2</td>
    <td>Entry Last Line 3</td>
    <td>Entry Last Line 4</td>
  </tr>
     <tr class="alt">
    <td>Entry Line 1</td>
    <td>Entry Line 2</td>
    <td>Entry Line 3</td>
    <td>Entry Line 4</td>
  </tr>
</table>

CSS

/* grid styles */
.mGrid {
width: 100%;
background-color: #fff;
border: solid 1px #525252;
border-collapse:collapse;
}
.mGrid td
{
    padding:4px 2px;
    border: solid 1px #c1c1c1;
    color: #000000;
    text-align: center;
    vertical-align:top;
}

.mGrid td.AlignLeft
{
   text-align: left !important; 
}
.mGrid td.AlignRight
{
   text-align: right !important; 
}
.mGrid th {
padding: 6px 3px;
color: #fff;
background: #424242 url(grd_head.png) repeat-x top;
border-left: solid 1px #525252;
font-size: inherit;
vertical-align:top;
}
.mGrid th a 
{ color:#fff;
}
.mGrid th a:hover
{
    text-decoration:none;
}
.mGrid .alt
{
    background: #E6E6E6;
}
.mGrid .pgr
{
    background: #C0C0C0;
}
.mGrid .pgr table
{
margin: 2px auto;
width: auto;
}
.mGrid .pgr td
{
    border-width: 0;
    padding: 0 3px;
    font-weight: bold;
    color: #fff;
    background-color: #424242;
}

JavaScript

$(document).ready(function() {
    $(".mGrid tr:has(td)").hover(function() {
        $(this).css("background-color", "red");
    }, function() {
        $(this).css("background-color", "yellow");
    });
});