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.
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.
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 Email
|
|||
3 comments :
good artical
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
Nice..... thanks
Note: Only a member of this blog may post a comment.