62,025
社区成员
发帖
与我相关
我的任务
分享
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<style type="text/css">
#tip
{
position: absolute;
padding: 10px 15px;
background: #ffc;
font: 14px courier;
color: #ddd;
display: none;
}
</style>
<script type="text/javascript" language="javascript">
//鼠标划过
function over(e, p) {
var posx = 0, posy = 0,
e = e || window.event,
tip = p.children[3].children[0]; //这里3代表元素P下边第四个"同级"元素的索引(索引从0开始),即元素div; 因此0代表元素div下第一个"同级"元素的索引,即元素span;实际可按照自己页面所放内容来确定
tip.style.display = 'inline';
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
} else if (e.clientX || e.clientY) {
posx = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posy = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;
};
tip.style.top = +posy + 15 + 'px';
tip.style.left = +posx + 15 + 'px';
};
//鼠标离开
function out(e) {
e.children[3].children[0].style.display = 'none'; //注释同上
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table width="50%" border="1" cellpadding="0" cellspacing="0" style="line-height: 150%;">
<tr>
<th>
Name
</th>
<th>
Sex
</th>
<th>
Age
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr onmouseover="over(this.event,this);" onmouseout="out(this);">
<td align="center">
<%#Eval("Name") %>
</td>
<td align="center">
<%#Eval("Sex") %>
</td>
<td align="center">
<%#Eval("Age") %>
</td>
<div id="tip">
<%--div里面可以放你想显示的任何东东,可逐行绑定数据,只要设置好样式,就可以显示非常不错的效果,
CSDN论坛上每个楼层用户图像鼠标悬停上显示的效果也基本是这个实现思路--%>
<span style="color: Red;">这里是绑定数据:<%#Eval("Name") %></span>
</div>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.Repeater1.DataSource = GetData();
this.Repeater1.DataBind();
}
}
private DataTable GetData()
{
DataTable dt = new DataTable();
DataColumn[] columns = new DataColumn[] {
new DataColumn("Name", typeof(string)),
new DataColumn("Sex", typeof(string)),
new DataColumn("Age", typeof(Int32))
};
dt.Columns.AddRange(columns);
DataRow row1 = dt.NewRow();
row1["Name"] = "张三";
row1["Sex"] = "男";
row1["Age"] = 23;
DataRow row2 = dt.NewRow();
row2["Name"] = "李四";
row2["Sex"] = "女";
row2["Age"] = 22;
DataRow row3 = dt.NewRow();
row3["Name"] = "赵二";
row3["Sex"] = "男";
row3["Age"] = 24;
dt.Rows.Add(row1);
dt.Rows.Add(row2);
dt.Rows.Add(row3);
return dt;
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<style>
td
{
cursor: pointer;
}
</style>
<script>
window.onload = test;
function test()
{
var tds = document.getElementsByTagName ("td");
for(var i =0; i<tds .length ;i++)
{
tds[i].onmouseover = Show;
tds[i].onmouseout = Hide;
}
}
function Show()
{
var tds = document.getElementsByTagName ("td");
for(var i =0; i<tds .length ;i++)
{
if(event.srcElement == tds[i])
{
document .getElementById ("tt").style.display = "block";
document .getElementById ("tt").innerText = tds[i].innerText;
document .getElementById ("tt").style.top = event.clientY +"px" ;
document .getElementById ("tt").style.left = event.clientX +"px";
}
}
}
function Hide()
{
var tds = document.getElementsByTagName ("td");
for(var i =0; i<tds .length ;i++)
{
if(event.srcElement == tds[i])
{
document .getElementById ("tt").style.display = "none";
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="position: relative;">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
<div id="tt" style="position: absolute; display: none; background: white; width: 150px;">
</div>
</div>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
System.Data.DataTable dt = new System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add(new System.Data.DataColumn("id", typeof(Int32)));
dt.Columns.Add(new System.Data.DataColumn("PkID", typeof(string)));
dt.Columns.Add(new System.Data.DataColumn("Title", typeof(string)));
for (int i = 0; i < 6; i++)
{
dr = dt.NewRow();
dr[0] = i;
dr[1] = "123123456789";
dr[2] = "sadasdsa";
dt.Rows.Add(dr);
}
this.GridView1.DataSource = dt;
this.GridView1.DataBind();
}