How To Change Gridview Row Color on Mouseover using css and Javascript

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Alternate.aspx.cs" Inherits="Alternate" %>
 
<!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>Untitled Page</title>
    <style type="text/css">
    .datatable tr:hover,.datatable tr.hilite
    {
    background-color: #DFE7F2;
    color: #000000;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="Server" CssClass="datatable">
            </asp:GridView>
        </div>
    </form>
 
    <script type="text/javascript">
    var rows = document.getElementsByTagName('tr');
    for (var i = 0; i < rows.length; i++) {
    rows[i].onmouseover = function() {
    this.className += ' hilite';
    }
    rows[i].onmouseout = function() {
    this.className = this.className.replace('hilite', '');
    }
    }
    </script>
 
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class Alternate : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
 
            GridView1.DataSource = GetCustomMadeDataTable();
            GridView1.DataBind();
        }
 
 
    }
    public DataTable GetCustomMadeDataTable()
    {
 
        //Create a new DataTable object
 
        System.Data.DataTable objDataTable = new System.Data.DataTable();
 
        //Create three columns with string as their type
 
        objDataTable.Columns.Add("ISBN", typeof(string));
        objDataTable.Columns.Add("Title", typeof(string));
        objDataTable.Columns.Add("Publisher", typeof(string));
        objDataTable.Columns.Add("Year", typeof(string));
 
        DataColumn[] dcPk = new DataColumn[1];
        dcPk[0] = objDataTable.Columns["ISBN"];
        objDataTable.PrimaryKey = dcPk;
        objDataTable.Columns["ISBN"].AutoIncrement = true;
        objDataTable.Columns["ISBN"].AutoIncrementSeed = 1;
        //Adding some data in the rows of this DataTable
        DataRow dr;
        for (int i = 1; i <= 5; i++)
        {
            dr = objDataTable.NewRow();
 
            dr[1] = "Title" + i.ToString();
            dr[2] = "Publisher" + i.ToString();
            dr[3] = "200" + i.ToString();
            objDataTable.Rows.Add(dr);
        }
        Session["strTemp"] = objDataTable;
        return objDataTable;
    }
 
    
 
 
}

1 comment: