實現GridView Tooltip的功能

<%@ 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 飛鳥工作室

實現GridView Tooltip的功能

自學編程兩個月，現在我月入 4 萬元

「實戰應用」如何用圖表控件LightningChart創建2D氣泡圖

百度安全多篇議題入選Blackhat Asia以硬技術發現“芯”問題

Google Chrome驅動程序 124.0.6367.62（正式版本）去哪下載？

Sql 類似?: 功能的函數

軟件工程的幾個問題

SQL實現split功能的函數

update delete left join

EXCEL（XMLMAPS）---ACCESS/SQLSERVER

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結