Question

我对JQuery很陌生，虽然取得了一些进展，但现在已经走到了一个角落，所以非常希望能够朝着正确的方向努力。

我有一个asp.net gridview（在更新面板中），它可以包含任意数量的行。在每一行我有几个数据绑定标签显示产品价格和代码，也在我有一个图像按钮的行上。我想要做的是当单击按钮以在按钮右侧的淡入Div中显示一些行数据时。例如，用户被告知正在添加到购物车的商品。

我已经阅读了行数据，并且在行信息中淡入了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}); });

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

1 个答案: