您的位置：首页 > Web前端 > JQuery

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

2015-05-06 11:04 686 查看
项目中，由于用户反映说：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" onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航