- <%@ 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>
- <script language="javascript" type="text/javascript">
- function selectkk()
- {
- var item = document.getElementById('Select1');
- // window.alert("sddsdsd");
- if(item.selectedIndex!=0)
- {
- window.alert(item.options[item.selectedIndex].text);
- }
- else
- {
- window.alert("is 0");
- }
- }
- function showDetail(cell1,cell2)
- {
- document.getElementById('td1').innerText="Name:"+cell1;
- document.getElementById('td2').innerText="Address:"+cell2;
- //获得鼠标的X轴的座标
- x = event.clientX + document.body.scrollLeft;
- //获得鼠标的Y轴的座标
- y = event.clientY + document.body.scrollTop+10;
- //显示弹出窗体
- Popup.style.display="block";
- //设置窗体的X,Y轴的座标
- Popup.style.left = x;
- Popup.style.top = y;
- }
- //隐藏弹出窗体
- function hide()
- {
- //隐藏窗体
- Popup.style.display="none";
- }
- </script>
- <style type="text/css">
- .transparent
- { BORDER-RIGHT: indianred 1px solid;
- BORDER-TOP: indianred 1px solid;
- DISPLAY: none; FILTER: alpha(opacity=85);
- BORDER-LEFT: indianred 1px solid;
- BORDER-BOTTOM: indianred 1px solid;
- POSITION: absolute;
- BACKGROUND-COLOR: infobackground;
- font-color;red;}
- </style>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <table border="1" style="width: 50%">
- <caption>
- </caption>
- <tr>
- <td style="width: 100px">
- </td>
- <td style="width: 100px">
- <select id="Select1" style="width: 109px" name="slt">
- <option value="0"><--seleted--></option>
- <option value="1">zhanpeng</option>
- <option value="2">zhanjia</option>
- <option value="3">lee jing</option>
- </select>
- </td>
- <td style="width: 122px">
- <input id="Button1" type="button" value="button" onclick="selectkk();" runat="server" /></td>
- </tr>
- <tr>
- <td style="width: 100px">
- </td>
- <td style="width: 100px">
- </td>
- <td style="width: 122px">
- </td>
- </tr>
- <tr>
- <td style="width: 100px; height: 30px;">
- </td>
- <td style="width: 100px; height: 30px;">
- <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" Width="326px" OnRowCreated="GridView1_RowCreated">
- <Columns>
- <asp:BoundField DataField="Name" HeaderText="Name"/>
- <asp:BoundField DataField="Address" HeaderText="Address" />
- </Columns>
- </asp:GridView>
- </td>
- <td style="width:300; height: 30px;">
- <div id="Popup" class="transparent" style="Z-INDEX:200;">
- <table style="width: 300">
- <tr>
- <td style="width: 100px" id="td1">
- </td>
- </tr>
- <tr>
- <td style="width: 100px; height: 21px;" id="td2">
- </td>
- </tr>
- </table>
- </div>
- </td>
- </tr>
- </table>
- </div>
- </form>
- </body>
- </html>
- ----------------------------
- using System;
- using System.Data;
- using System.Configuration;
- 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;
- using System.Data.SqlClient;
- public partial class _Default : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- if (!this.IsPostBack)
- {
- getDate();
- }
- }
- public void getDate()
- {
- SqlConnection con = new SqlConnection("server=server01;database=test;uid=sa;pwd=sql");
- con.Open();
- SqlDataAdapter da = new SqlDataAdapter("select * from tab", con);
- DataSet ds = new DataSet();
- da.Fill(ds);
- GridView1.DataSource = ds;
- GridView1.DataBind();
- }
- protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
- {
- if (e.Row.RowType == DataControlRowType.DataRow)
- {
- e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#C0C0FF';this.style.cursor='hand';showDetail('" + e.Row.Cells[0].Text + "','" + e.Row.Cells[1].Text + "')");
- e.Row.Attributes.Add("onmouseout", "hide();this.style.backgroundColor=currentcolor;");
- }
- }
- protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
- {
- //if (e.Row.RowType == DataControlRowType.DataRow)
- //{
- // e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#C0C0FF';this.style.cursor='hand';");
- // ////当鼠标移走时还原该行的背景色
- // //e.Row.Attributes.Add("onmouseover", "showDetail('" + e.Row.Cells[0].Text + "','" + e.Row.Cells[1].Text + "')");
- // e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor;hide();");
- //}
- }
- }
这段代码是网上找的,但是我发现当拖动右边的滚动条以后,这个TIP就跑到屏幕的可见处以外的地方去了,我在这里对其进行修正,希望对大家有帮助:
更改此函数:
- function showDetail(cell1,cell2)
- {
- document.getElementById('td1').innerText="Name:"+cell1;
- document.getElementById('td2').innerText="Address:"+cell2;
- //获得鼠标的X轴的座标
- x = event.clientX + document.body.scrollLeft;
- //获得鼠标的Y轴的座标
- y = event.clientY + document.body.scrollTop+10;
- //显示弹出窗体
- Popup.style.display="block";
- //设置窗体的X,Y轴的座标
- Popup.style.left = x;
- Popup.style.top = y;
- }
为
- function showDetail(cell1,cell2)
- {
- document.getElementById('td1').innerText="Name:"+cell1;
- document.getElementById('td2').innerText="Address:"+cell2;
- //获得鼠标的X轴的座标
- panelAdmin=document.getElementById("Popup");
- var bt=event.srcElement||event.target;
- panelAdmin.style.display="block";
- panelAdmin.style.left=bt.offsetLeft+20+"px";
- panelAdmin.style.top=realOffset(bt).y+bt.offsetHeight+5+"px";
- }
然后添加此javascript函数
- function realOffset(o)
- {
- var x = y = 0; do{
- x += o.offsetLeft || 0;
- y += o.offsetTop || 0;
- o = o.offsetParent;}while(o);
- return {"x" : x, "y" : y};
- }
如果大家有什么不明白的地方请与我联系
----power by 飞鸟工作室