zoukankan      html  css  js  c++  java
  • Gridview中当鼠标经过数据行时弹出一个层显示数据

    前台代码:

    JS代码
    1 <script language="javascript" type="text/javascript">
    2 function Test(name,companyName,contactName,contactTitle,address)
    3 {
    4 var x = event.clientX;
    5 var y =event.clientY;
    6 document.getElementById("td1").innerText ="姓名:"+name;
    7 document.getElementById("td2").innerText ="工作单位:"+companyName;
    8 document.getElementById("td3").innerText ="负责人:"+contactName;
    9 document.getElementById("td4").innerText ="职位:"+contactTitle ;
    10 document.getElementById("td5").innerText ="地址:"+address;
    11 document.getElementById("div1").style.position='absolute';
    12 document.getElementById("div1").style.display='block';
    13 document.getElementById("div1").style.left =x;
    14 document.getElementById("div1").style.top = y;
    15 }
    16 function Hide()
    17 {
    18 document.getElementById("div1").style.display='none';
    19 }
    20 </script>
    页面源码
    1 <div id="div1" style="display: none; border:solid 1px #000080">
    2 <table>
    3 <tr >
    4 <td id="td1" style="border-bottom:solid 1px #000080">
    5 </td>
    6 </tr>
    7 <tr>
    8 <td id="td2" style="border-bottom:solid 1px #000080">
    9 </td>
    10 </tr>
    11 <tr>
    12 <td id="td3" style="border-bottom:solid 1px #000080">
    13 </td>
    14 </tr>
    15 <tr>
    16 <td id="td4" style="border-bottom:solid 1px #000080">
    17 </td>
    18 </tr>
    19 <tr>
    20 <td id="td5">
    21 </td>
    22 </tr>
    23 </table>
    24 </div>
    25 <div>
    26 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    27 onrowdatabound="GridView1_RowDataBound">
    28 <Columns>
    29 <asp:BoundField DataField="CustomerID" HeaderText="姓名" />
    30 <asp:BoundField DataField="CompanyName" HeaderText="工作单位" />
    31 <asp:BoundField DataField="ContactName" HeaderText="负责人" />
    32 <asp:BoundField DataField="ContactTitle" HeaderText="职位" />
    33 <asp:BoundField DataField="Address" HeaderText="地址" />
    34 </Columns>
    35 </asp:GridView>
    36 </div>

    后台代码:

    后台源码
    1 protected void Page_Load(object sender, EventArgs e)
    2 {
    3
    4 if (!IsPostBack)
    5 {
    6 databind();
    7 }
    8 }
    9 public void databind()
    10 {
    11 SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Conn"].ToString());
    12 SqlCommand cmd = new SqlCommand();
    13 cmd.Connection = con;
    14 cmd.CommandText = "Select top 10 * From Customers";
    15 SqlDataAdapter da = new SqlDataAdapter(cmd);
    16 DataSet ds = new DataSet();
    17 da.Fill(ds);
    18 this.GridView1.DataSource = ds.Tables[0];
    19 this.GridView1.DataKeyNames = new string[] { "CustomerID" };
    20 this.GridView1.DataBind();
    21 }
    22 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    23 {
    24 if (e.Row.RowType == DataControlRowType.DataRow)
    25 {
    26 e.Row.Attributes.Add("onmouseover", "Test('" + e.Row.Cells[0].Text + "','" + e.Row.Cells[1].Text + "','" + e.Row.Cells[2].Text + "','" + e.Row.Cells[3].Text + "','" + e.Row.Cells[4].Text + "')");
    27 e.Row.Attributes.Add("onmouseout", "Hide()");
    28 }
    29 }
    怀揣着一点点梦想的年轻人
    相信技术和创新的力量
    喜欢快速反应的工作节奏
  • 相关阅读:
    汉诺塔问题_栈模拟递归
    汉诺塔问题_栈模拟递归
    Dockerfile指令
    Dockerfile指令
    C++全排列组合算法
    剑指offer——复杂链表复制
    数据库中的索引实现原理
    TCP三次握手四次挥手详解
    TCP协议原理
    OSI七层模型
  • 原文地址:https://www.cnblogs.com/hfliyi/p/1964852.html
Copyright © 2011-2022 走看看