DataGrid实现tooltip功能

zoukankan html css js c++ java

DataGrid实现tooltip功能

1.html

<html>
<head>
    <title>DataGridTooltip</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <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 } </style>

    <script language="javascript">
            function Show(Country, City, Address, PostalCode, Phone, Fax)
            {
                //debugger;
                document.getElementById("td1").innerText="国家："+Country;
                document.getElementById("td2").innerText="城市："+City;
                document.getElementById("td3").innerText="地址："+Address;
                document.getElementById("td4").innerText="邮编："+PostalCode;
                document.getElementById("td5").innerText="电话："+Phone;
                document.getElementById("td6").innerText="传真："+Fax;
                x = event.clientX + document.body.scrollLeft;
                y = event.clientY + document.body.scrollTop + 20;
                Popup.style.display="block";
                Popup.style.left = x;
                Popup.style.top = y;
            }
            function Hide()
            {
                Popup.style.display="none";
            }
    </script>

</head>
<body ms_positioning="GridLayout">
    <form id="Form1" method="post" runat="server">
        <div id="Popup" class="transparent">
            <table border="0" cellpadding="0" bgcolor="#00ccff">
                <tr>
                    <td align="center" bgcolor="indianred">
                        <font color="white">联系方式</font></td>
                </tr>
                <tr>
                    <td id="td1">
                    </td>
                </tr>
                <tr>
                    <td id="td2">
                    </td>
                </tr>
                <tr>
                    <td id="td3">
                    </td>
                </tr>
                <tr>
                    <td id="td4">
                    </td>
                </tr>
                <tr>
                    <td id="td5">
                    </td>
                </tr>
                <tr>
                    <td id="td6">
                    </td>
                </tr>
            </table>
        </div>
        <asp:DataGrid ID="DataGrid1" runat="server">
            <FooterStyle ForeColor="#003399" BackColor="#99CCCC"></FooterStyle>
            <SelectedItemStyle Font-Bold="True" ForeColor="#CCFF99" BackColor="#009999"></SelectedItemStyle>
            <ItemStyle ForeColor="#003399" BackColor="White"></ItemStyle>
            <HeaderStyle Font-Bold="True" ForeColor="#CCCCFF" BackColor="#003399"></HeaderStyle>
            <PagerStyle HorizontalAlign="Left" ForeColor="#003399" BackColor="#99CCCC" Mode="NumericPages">
            </PagerStyle>
        </asp:DataGrid>
    </form>
</body>
</html>
2.cs

public class DataGridTooltip : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.DataGrid DataGrid1;
        private DataTable dt;

        Page_LoadPage_Load

        DataGrid1_ItemDataBoundDataGrid1_ItemDataBound

        Web Form Designer generated codeWeb Form Designer generated code
    }

查看全文

相关阅读:
【数据结构】算法 Minimum Remove to Make Valid Parentheses 移除无效的括号
 【数据结构】算法 Remove Outermost Parentheses 删除最外层的括号
 【数据结构】算法 Valid Parentheses 有效的括号
 for嵌套的那些事
 i++与++i的区别
 初次接触JS 2017/11/27
鼠标经过图片变大
 bootstrap使用
 ajax的应用原理及基本用法
 ajax实例代码及效果

原文地址：https://www.cnblogs.com/puke/p/773145.html