» Unlabelled » Highlight gridview row on mouseover using jquery

Highlight gridview row on mouseover using jquery

- on 4:31 PM - 1 comment

Whenever you hover your mouse pointer over any GridView row, that row gets highlighted. 

Add the following jquery library inside the <head></head> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 Add the following code next to the jquery library.

<script type="text/javascript">
           $(document).ready(function () {
               $("#GridView1 td").hover(function () {
                   $(this).parent().addClass("Highlight");
               }, function () {
                   $(this).parent().removeClass("Highlight");
               });

           });
    </script>

Add the following css code.

<style type="text/css">
.Highlight
{
background-color:Blue;
color:white;
}
</style>

Add Page HighlightRow.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HighlightRow.aspx.cs" Inherits="HighlightRow" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
       <script type="text/javascript">
           $(document).ready(function () {
               $("#GridView1 td").hover(function () {
                   $(this).parent().addClass("Highlight");
               }, function () {
                   $(this).parent().removeClass("Highlight");
               });

            });
    </script>
     <style type="text/css">
    .Highlight
     {
    background-color:Blue;
    color:white;
    }
    
 </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </div>
    </form>
</body>

</html>

1 comments:

Post a Comment