Aspdotnet-Suresh

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

jQuery Higlight Table Row & Column on Mouseover in Asp.net

Jul 20, 2014
Introduction:

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

Description:

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

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


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Asp.net Bind Data to Datatable using JQuery or JSON</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
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) {
alert("Error");
}
});
});
</script>
<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;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table id="tbDetails" class="tbl">
<tr >
<th>UserId</th>
<th>UserName</th>
<th>Location</th>
</tr>
<tbody>
</tbody>
</table>
</form>
</body>
</html>
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)
{

}
[WebMethod]
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();
details.Add(user);
}
return details.ToArray();
}
public class UserDetails
{
public string Tagid { get; set; }
public string TagName { get; set; }
public string Noofarticles { get; set; }
}
}
VB.NET Code


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()
details.Add(user)
Next
Return details.ToArray()
End Function
Public Class UserDetails
Public Property Tagid() As String
Get
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
Get
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
Get
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
Demo



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

Get the latest Asp.net, C#.net, 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

2 comments :

Ashok Kumar said...

good artical

sohan said...

nice article

Give your Valuable Comments

Other Related Posts

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