点击GridView中TextBox弹出输入对话层，输入内容反传回先前点击的TextBox中(Jquery获取GridView中TextBox的ID)

最新推荐文章于 2017-02-23 17:53:40 发布

我本良人

最新推荐文章于 2017-02-23 17:53:40 发布

阅读量1.6k

点赞数

分类专栏： jQuery asp.net

本文链接：https://blog.csdn.net/yangmingxing980/article/details/45533189

版权

asp.net 同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

jQuery

15 篇文章 0 订阅

订阅专栏

项目中，由于用户反映说：GridView表中的输入框太小，不方便输入，特别是在输入内容多的时候。问能不能点击GridView中输入框的时候能弹出一个大的内容输入对话框。

介于用户的要求，我就开始修改。

先想到的就是我用Jquery在GridView中TextBox上添加一个focus焦点捕捉事件，当点击时触犯弹出内容输入框。

然后就是当输入完毕的操作了，我又使用内容输入框（其实也是一个TextBox）的焦点失去事件（blur），在该事件中先把值反馈回先前点击的GridView中的那个TextBox，然后隐藏内容输入框。

上面大部门地方都没有遇到问题，但是到把内容输入框中的值反传给GridView点击的那个TextBox时出现问题了，弄了好久不能实现，后面去网上求助，经过好心人的指导，慢慢有所感悟。经过多次修改，测试，终于成功了。

也许对很多人来说，这个问题很简单，但对我这种菜鸟来说，从中学到了很多东西。

<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
    <script type="text/javascript">
        var cc;
        $(function ()
        {
            $("#TextBox2").blur(function ()
            {
                var alltext = $("#TextBox2").val();
                $("#"+cc).val(alltext);
                //alert(alltext);
                $("#div2").hide();
            })
        })
        function Test(obj)
        {
            var rr = $(obj).attr("id");
            $("#TextBox2").val("");
            var top = ($(window).height() - $("#div2").height()) / 2;
            var left = ($(window).width() - $("#div2").width()) / 2;
            var scrollTop = $(document).scrollTop();
            var scrollLeft = $(document).scrollLeft();
            $("#div2").css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
            cc = rr;
        }
  
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 1200px; height: 800px;">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField HeaderText="编号" DataField="LoginID" />
                <asp:BoundField HeaderText="姓名" DataField="UserName" />
                <asp:BoundField HeaderText="性别" DataField="Sex" />
                <asp:TemplateField HeaderText="评价">
                    <ItemTemplate>
                        <input id="TextBox1" type="text" runat="server" οnclick="Test(this);" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    </div>
    <asp:HiddenField ID="HiddenField1" runat="server" />
    <div id="div2" style="display: none; width: 400px; height: 200px; z-index: 10000;"
        align="center">
        <textarea type="text" id="TextBox2" runat="server" style="width: 400px; height: 200px;
            background-color: Gray" />
    </div>
    </form>
</body>
</html>

我本良人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击GridView中TextBox弹出输入对话层，输入内容反传回先前点击的TextBox中(Jquery获取GridView中TextBox的ID)

项目中，由于用户反映说：GridView表中的输入框太小，不方便输入，特别是在输入内容多的时候。问能不能点击GridView中输入框的时候能弹出一个大的内容输入对话框。介于用户的要求，我就开始修改。先想到的就是我用Jquery在GridView中TextBox上添加一个focus焦点捕捉事件，当点击时触犯弹出内容输入框。然后就是当输入完毕的操作了，我又使用内容输入框（其实也是一个Tex
复制链接

扫一扫