aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Higlight Table Row & Column on Mouseover in

Jul 20, 2014

here I will explain how to use
jQuery to highlight table row and column on mouse over in using jQuery, c#, with example or jQuery table highlight row & column on hover in using c#,


In previous post I explained jQuery Tag cloud example in, jQuery show datatable on aspx page in,
send html page as mail body in, how to send mail with attachment in and many more articles related to jQuery,, c# and Now I will explain how to how to highlight table row and column on mouse hover in using jQuery, c#, with example.

To implement this first create new website and write follwing code in Default.aspx page

<html xmlns="">
<head id="Head1">
<title> Bind Data to Datatable using JQuery or JSON</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(function() {
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/BindDatatable",
data: "{}",
dataType: "json",
success: function(data) {
for (var i = 0; i < data.d.length; i++) {
if (i % 2 == 0) {
$("#tbDetails").append("<tr class=tg-even><td>" + data.d[i].Tagid + "</td><td>" + data.d[i].TagName + "</td><td>" + data.d[i].Noofarticles + "</td></tr>");
else {
$("#tbDetails").append("<tr><td>" + data.d[i].Tagid + "</td><td>" + data.d[i].TagName + "</td><td>" + data.d[i].Noofarticles + "</td></tr>");
$('td').mouseover(function() {
$(this).siblings().css('background-color', '#EAD575');
var ind = $(this).index();
$('td:nth-child(' + (ind + 1) + ')').css('background-color', '#EAD575');
$('td').mouseleave(function() {
$(this).siblings().css('background-color', '');
var ind = $(this).index();
$('td:nth-child(' + (ind + 1) + ')').css('background-color', '');
error: function(result) {
<style type='text/css'>
.tbl {
border-collapse: collapse;
border-spacing: 0;
.tbl td, .tbl th {
background-color: #fff;
border: 1px #bbb solid;
color: #333;
font-family: sans-serif;
font-size: 100%;
padding: 10px;
vertical-align: top;
.tbl .tg-even td {
background-color: #eee;
.tbl th {
background-color: #ddd;
color: #333;
font-size: 110%;
font-weight: bold;
<form id="form1" runat="server">
<table id="tbDetails" class="tbl">
<tr >
After completion of aspx page write the following code in codebehind

C# Code

using System;
using System.Collections.Generic;
using System.Data;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)

public static UserDetails[] BindDatatable()
List<UserDetails> details = new List<UserDetails>();
DataTable dt = new DataTable();
dt.Columns.Add("Tagid", typeof(Int32));
dt.Columns.Add("TagName", typeof(string));
dt.Columns.Add("Noofarticles", typeof(string));
dt.Rows.Add(1, "Asp.Net", 100);
dt.Rows.Add(2, "C#.Net", 10);
dt.Rows.Add(3, "SQL Server", 30);
dt.Rows.Add(4, "jQuery", 20);
dt.Rows.Add(6, "javascript", 15);
dt.Rows.Add(7, "XSLT", 50);
foreach (DataRow dtrow in dt.Rows)
UserDetails user = new UserDetails();
user.Tagid = dtrow["Tagid"].ToString();
user.TagName = dtrow["TagName"].ToString();
user.Noofarticles = dtrow["Noofarticles"].ToString();
return details.ToArray();
public class UserDetails
public string Tagid { get; set; }
public string TagName { get; set; }
public string Noofarticles { get; set; }

Imports System.Collections.Generic
Imports System.Data
Imports System.Web.Services
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
<WebMethod()> _
Public Shared Function BindDatatable() As UserDetails()
Dim details As New List(Of UserDetails)()
Dim dt As New DataTable()
dt.Columns.Add("Tagid", GetType(Int32))
dt.Columns.Add("TagName", GetType(String))
dt.Columns.Add("Noofarticles", GetType(String))
dt.Rows.Add(1, "Asp.Net", 100)
dt.Rows.Add(2, "C#.Net", 10)
dt.Rows.Add(3, "SQL Server", 30)
dt.Rows.Add(4, "jQuery", 20)
dt.Rows.Add(6, "javascript", 15)
dt.Rows.Add(7, "XSLT", 50)
For Each dtrow As DataRow In dt.Rows
Dim user As New UserDetails()
user.Tagid = dtrow("Tagid").ToString()
user.TagName = dtrow("TagName").ToString()
user.Noofarticles = dtrow("Noofarticles").ToString()
Return details.ToArray()
End Function
Public Class UserDetails
Public Property Tagid() As String
Return m_Tagid
End Get
Set(ByVal value As String)
m_Tagid = Value
End Set
End Property
Private m_Tagid As String
Public Property TagName() As String
Return m_TagName
End Get
Set(ByVal value As String)
m_TagName = Value
End Set
End Property
Private m_TagName As String
Public Property Noofarticles() As String
Return m_Noofarticles
End Get
Set(ByVal value As String)
m_Noofarticles = Value
End Set
End Property
Private m_Noofarticles As String
End Class
End Class

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Ashok Kumar said...

good artical

sohan said...

nice article

Anonymous said...

for (var i = 0; i < data.d.length; i++)
in this artical what is the role of d and where we have define d???? please explain

Anonymous said...

Nice..... thanks

Give your Valuable Comments

Other Related Posts

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.