JQuery在gridview中获取单击按钮的位置

Question

我对JQuery相当陌生，取得了一些进展，但现在在一个角落，所以将非常感谢在正确的方向微调。

我有一个asp.net gridview（更新面板内），它可以包含任意数量的行。在每一行中，我都有几个数据绑定标签，显示产品价格和代码，同样在我有一个图像按钮的行上。我正在尝试做的事情是点击按钮在按钮右侧显示淡入淡出的部分行数据。例如，向用户通知要添加到购物车的物品。

我已经得到尽可能读行数据和在行信息的div淡出。但努力获得点击按钮的位置，所以我可以重新定位Div适当的按钮旁边。

下面是一些代码：

后面的代码：

protected void Page_Load(object sender, EventArgs e) 
{ 
if (!Page.IsPostBack) 
{ 
    DataTable dt = new DataTable(); 
    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Item"), new DataColumn("Price"), new  DataColumn("Code") }); 
    dt.Rows.Add("Shirt", 200, "abc"); 
    dt.Rows.Add("Football", 30, "xyz"); 
    dt.Rows.Add("Bat", 22.5, "sym"); 
    GridView1.DataSource = dt; 
    GridView1.DataBind(); 
} 

}

标记：我已删除了更新面板，以减少代码大小。

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.master" AutoEventWireup="true" 
    CodeFile="test.aspx.cs" Inherits="test" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> 
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" 
     rel="stylesheet" type="text/css" /> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="Main" runat="Server"> 
<script type="text/javascript"> 

    function pageLoad() { 
     $("[id*=lnkSelect]").live("click", function() { 

      //Get the values 
      var code = $("#code").html($(".code", $(this).closest("tr")).html()); 
      var price = $("#price").html($(".price", $(this).closest("tr")).html()); 

      //Build the new HTML 
      $(code).prepend("<br/>Item: "); 
      $(code).append("<br/>Has been<br/>added to your cart."); 
      $(code).append("<br/>Price: "); 
      $(code).append(price); 
      $(".tooltipleft").html(code); //Set the new HTML 
      $(".tooltipleft").fadeIn("slow").fadeOut("slow"); //Show the div 

      return true; 
     }); 

    }; 
</script> 
     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> 
      <Columns> 
       <asp:BoundField DataField="Item"/> 
       <asp:TemplateField> 
        <ItemTemplate> 
         <asp:Label ID="lblPrice" runat="server" ForeColor="DimGray" CssClass="price" Text='<%# Eval("Price") %>'></asp:Label> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:TemplateField> 
        <ItemTemplate> 
         <asp:Label ID="lblCode" runat="server" ForeColor="DimGray" CssClass="code" Text='<%# Eval("Code") %>'></asp:Label> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:TemplateField> 
        <ItemTemplate> 
         <asp:ImageButton ID="lnkSelect" runat="server" ImageUrl="~/Buttons/add_to_cart.png" 
          AlternateText="Add To Cart" ImageAlign="Right" CssClass="buttontag" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
      </Columns> 
     </asp:GridView> 
    <div class="tooltipleft" id="tooltip"> 
    </div> 
</asp:Content> 

希望有任何帮助。

干杯

CM

Answer 1

这应该把你在正确的轨道上：

编辑
为了体现我的jsfiddle在评论

  $("[id*=lnkSelect]").live("click", function() { 
      var pos=$("#imgBut1").offset(); 
      $("#divinquestion").css({"position": "absolute", "display" : "block" }).show().offset({top:pos.top,left:pos.left+35}); 

      });