Can anyone help me this animating this grid view with jquery. Its more over like when I get the mouse to the grid the color change has to happen, but there is some problem with the code. Can anyone correct it?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridAnimate.aspx.cs" Inherits="Animate.GridAnimate" %>
<!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="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#GridView1 thead').addClass('headerRow');
$('#GridView1 tbody tr').mouseover(function () {
$(this).addClass('highlightRow');
}).mouseout(function () {
$(this).removeClass('highlightRow');
}).click(function () {
$(this).toggleClass('selectedRow');
});
});
</script>
<style type="text/css">
th
{
text-align: left;
}
.headerRow
{
background-color: #458B74;
color: White;
font-weight: bold;
}
.highlightRow
{
background-color: #8B2323;
cursor: pointer;
border: solid 1px black;
}
.selectedRow
{
background-color: #6495ED;
cursor: pointer;
border: solid 1px black;
color: White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None" Width="300px">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="PersonID" HeaderText="PersonID"
SortExpression="PersonID" />
<asp:BoundField DataField="LastName" HeaderText="LastName"
SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName"
SortExpression="FirstName" />
<asp:BoundField DataField="Office" HeaderText="Office"
SortExpression="Office" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorks2008ConnectionString %>"
SelectCommand="SELECT [PersonID], [LastName], [FirstName], [Office], [City] FROM [Persons]">
</asp:SqlDataSource>
</form>
</body>
</html>