DataGrid中的高級ToolTip 1

實現的效果是因爲單條記錄須要瞭解的信息過多使DataGrid中擺放不下時的解決方案，首先將記錄的一部分信息進行分類將重要的信息進行保留顯示，將相關信息列隱藏掉，在鼠標移動到DataGrid中相應的記錄中時，會出現一個跟隨鼠標的ToolTip將相關信息顯示在其中。
        實現原理是在HTML中隱藏一個放在DIV標籤中的Table，而後在分別經過鼠標的onmouseover和onmouseout事件實如今鼠標移動到不一樣的記錄時顯示不一樣記錄的ToolTip信息，經過onmousemove事件實現ToolTip的跟隨事件。
        代碼以下：
HTML

  1 <% @ Page language="c#" Codebehind="DataGrid中的高級ToolTip.aspx.cs" AutoEventWireup="false" Inherits="CSDNTech.DataGrid中的高級ToolTip"  %>
  2 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
  3 < HTML >
  4    < HEAD >
  5          < title > DataGrid中的高級ToolTip </ title >
  6          < meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
  7          < meta  name ="CODE_LANGUAGE"  Content ="C#" >
  8          < meta  name ="vs_defaultClientScript"  content ="JavaScript" >
  9          < meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
 10          < style  type ="text/css" >
 11        .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 }
 12         </ style >
 13          < script  language ="javascript" >
 14        function Show(Country, City, Address, PostalCode, Phone, Fax)
 15        {
 16            document.getElementById("td1").innerText="國家："+Country;
 17            document.getElementById("td2").innerText="城市："+City;
 18            document.getElementById("td3").innerText="地址："+Address;
 19            document.getElementById("td4").innerText="郵政編碼："+PostalCode;
 20            document.getElementById("td5").innerText="電話："+Phone;
 21            document.getElementById("td6").innerText="傳真："+Fax;
 22            
 23            //得到鼠標的X軸的座標
 24            x = event.clientX + document.body.scrollLeft;
 25            
 26            //得到鼠標的Y軸的座標
 27            y = event.clientY + document.body.scrollTop + 20;
 28            
 29            //顯示彈出窗體
 30            Popup.style.display="block";
 31            
 32            //設置窗體的X,Y軸的座標
 33            Popup.style.left = x;
 34            Popup.style.top = y;
 35        }
 36        
 37        //隱藏彈出窗體
 38        function Hide()
 39        {
 40            //隱藏窗體
 41            Popup.style.display="none";
 42        }
 43         </ script >
 44 </ HEAD >
 45      < body >
 46          < form  id ="Form1"  method ="post"  runat ="server" >
 47              < TABLE  id ="Table1"  cellSpacing ="3"  cellPadding ="3"  width ="300"  border ="0" >
 48                  < TR >
 49                      < TD >
 50                          < asp:DataGrid  id ="DataGrid1"  runat ="server"  AutoGenerateColumns ="False"  AllowPaging ="True" >
 51 < Columns >
 52 < asp:BoundColumn  DataField ="CustomerID"  HeaderText ="CustomerID" ></ asp:BoundColumn >
 53 < asp:BoundColumn  DataField ="CompanyName"  HeaderText ="CompanyName" ></ asp:BoundColumn >
 54 < asp:BoundColumn  DataField ="ContactTitle"  HeaderText ="ContactTitle" ></ asp:BoundColumn >
 55 < asp:BoundColumn  DataField ="Address"  HeaderText ="Address" ></ asp:BoundColumn >
 56 < asp:BoundColumn  DataField ="City"  HeaderText ="City" ></ asp:BoundColumn >
 57 < asp:BoundColumn  DataField ="PostalCode"  HeaderText ="PostalCode" ></ asp:BoundColumn >
 58 < asp:BoundColumn  DataField ="Country"  HeaderText ="Country" ></ asp:BoundColumn >
 59 < asp:BoundColumn  DataField ="Phone"  HeaderText ="Phone" ></ asp:BoundColumn >
 60 < asp:BoundColumn  DataField ="Fax"  HeaderText ="Fax" ></ asp:BoundColumn >
 61 </ Columns >
 62
 63 < PagerStyle  Mode ="NumericPages" >
 64 </ PagerStyle >
 65                          </ asp:DataGrid ></ TD >
 66                  </ TR >
 67                  < TR >
 68                      < TD >
 69                          < div  id ="Popup"  class ="transparent"  style =" Z-INDEX: 200" >
 70                              < table  border ="0"  cellpadding ="0"  style ="FONT-SIZE: x-small" >
 71                                  < tr >
 72                                      < td  valign ="middle"  bgcolor ="indianred" >< font  color ="white" > 聯繫方式 </ font ></ td >
 73                                  </ tr >
 74                                  < tr >
 75                                      < td  id ="td1" ></ td >
 76                                  </ tr >
 77                                  < tr >
 78                                      < td  id ="td2" ></ td >
 79                                  </ tr >
 80                                  < tr >
 81                                      < td  id ="td3" ></ td >
 82                                  </ tr >
 83                                  < tr >
 84                                      < td  id ="td4" ></ td >
 85                                  </ tr >
 86                                  < tr >
 87                                      < td  id ="td5" ></ td >
 88                                  </ tr >
 89                                  < tr >
 90                                      < td  id ="td6" ></ td >
 91                                  </ tr >
 92                              </ table >
 93                          </ div >
 94                      </ TD >
 95                  </ TR >
 96                  < TR >
 97                      < TD ></ TD >
 98                  </ TR >
 99              </ TABLE >
100          </ form >
101      </ body >
102 </ HTML >