Asp.Net Tutorial - Highlighting rows/cells of a GridView on hover using jQuery

In certain applications, for better readability there might be a need to highlight the rows/cells of a GridView on hover. We will see how to achieve this effect.

Create a new web form GridViewHover.aspx in the current project.

Add a GridView control to the form and bind its data as explained earlier in this chapter.

The web form contents are as shown:

<form id="form1" runat="server">
<div align="center">
<fieldset style="width:400px;height:230px;">
<table border="0" cellpadding="3" cellspacing="3">
<tr><td colspan="2" class="header">BOOK CATALOG</td></tr>
<tr>
<td colspan="2">
<asp:GridView ID="GridView1" SkinID="Professional" runat="server">
</asp:GridView>
</td>
</tr>
</table>
</fieldset>
</div>
</form>

Change the cursor style for the GridView cells:

td { cursor:pointer;}

Add a css class highlight to the form so that we can change the background color of a row or cell:

.highlight
{
background-color:#9999FF;
}

The complete jQuery solution is as follows:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#<%=GridView1.ClientID%> tr").hover(
function() {
$(this).addClass("highlight");
},
function() {
$(this).removeClass("highlight");
});
});
</script>