HighLight Grid View Selected Row Using Jquery..?

All we need to do is that on mouseover on gridview rows assign any CSS and on mouseout, remove that CSS. Rather than using mouseover and mouseout method seperately, jQuery provides another method named "hover()" which serves purpose of both the methods.


    <script type="text/javascript" language="javascript">
 
       $(document).ready(function() {
          $("#<%=gvCustomer.ID%> tr").hover(function() {
            $(this).css("background-color", "Lightgrey");
           }, function() {
           $(this).css("background-color", "#ffffff");
          });
        });
 
    </script>


My Grid view structure is.


<asp:GridView ID="gvCustomer" runat="server" AutoGenerateColumns="False"
            DataKeyNames="ID" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
                    ReadOnly="True" SortExpression="ID" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="Age" HeaderText="Age" SortExpression="Age" />
            </Columns>
</asp:GridView>


Here the above code highlighted header row as well. Solution to overcome header row highlighted solution is here.


  <script type="text/javascript" language="javascript">
 
        $(document).ready(function() {
          $("#<%=gvCustomer.ID%> tr:has(td)").hover(function() {
            $(this).css("background-color", "Lightgrey");
           }, function() {
           $(this).css("background-color", "#ffffff");
          });
        });
 
    </script>


Enjoy Coding:)