如何使用 Javascript 在 GridView 中查找文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21661546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to find text-box in GridView using Javascript
提问by moe
I am trying to get access and find text-box in GridView using javascript but i am getting an error: 'The name txt_UID' does not exist in the current context'. Everything worked fine when my text-box was outside of the GridView. Here is my text-box in the gridview and my gridview is called GridView1:
我正在尝试使用 javascript 访问并在 GridView 中查找文本框，但出现错误：“当前上下文中不存在名称 txt_UID”。当我的文本框在 GridView 之外时，一切正常。这是我在 gridview 中的文本框，我的 gridview 被称为 GridView1：
<asp:TemplateField ItemStyle-Width="150px" HeaderText="User Assigned">
<ItemTemplate>
<asp:TextBox ID="txt_UID" runat="server" Text='<%# Eval("UID")%>'
CssClass="AutoCompleteTextBox" Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="150px" />
</asp:TemplateField>
Here is my JavaScript:
这是我的 JavaScript：
<script type ="text/javascript">
function setAutoComplete() {
var textBoxes = document.getElementsByClassName("AutoCompleteTextBox");
for (var i = 0; i < textBoxes.length; i++) {
addAutoComplete(textBoxes[i].id);
}
}
</script>
<script type="text/javascript">
function addAutoComplete(textBoxId) {
$("#" + textBoxId).autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Service.asmx/GetUserNames") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hfUserId.ClientID %>").val(i.item.val);
},
minLength: 1
});
};
<script type ="text/javascript">
$(document).ready(function () { setAutoComplete(); });
</script>
回答by SMI
Your Gridviewwill be rendered as Tableand your control will be contained in cellof table. You can give a try to following.
您Gridview将呈现为Table，您的控件将包含在cell表中。您可以尝试跟随。
<script type=”text/javascript”>
$(document).ready(function(){
tblTable=document.getElementById(‘<<Client ID of the GridView>>');
Cell=tblTable.rows[i].cells[j];//i and j are locations of that cell.
FirstControl = Cell.childNodes[0];
});
</script>
replace <<Client ID of the GridView>>with id of your GridView
替换<<Client ID of the GridView>>为您的 IDGridView
回答by Dmitriy Khaykin
The problem is your GridViewcreates a TextBoxon each row. There is no "txt_UID" control outside of the GridView. That is what your error message is telling you.
问题是您在每一行上GridView创建了TextBox一个。.txt 文件之外没有“txt_UID”控件GridView。这就是你的错误信息告诉你的。
Your JavaScriptfunction is designed to work with one TextBox. I imagine you want the AutoComplete to work on ALL TextBoxcontrols in the GridView.
您的JavaScript函数旨在与一个TextBox. 我想您希望 AutoCompleteTextBox在GridView.
My suggestion would be to change the JavaScriptfunction to take a parameter with the TextBoxID and then add a CSS classto each TextBox, and finally make a wrapper JavaScriptfunction that will enumerate the TextBoxcontrols using getElementsByClassName, and call that wrapper function on DOM ready.
我的建议是改变JavaScript功能，采取与参数TextBoxID，然后添加CSS class到每个TextBox，并最终使包装JavaScript功能，将枚举TextBox使用的控制getElementsByClassName，并呼吁该包装函数DOM ready。
Here's what it will look like:
这是它的样子：
Add CSS class to the TextBoxes:
将 CSS 类添加到文本框：
<asp:TemplateField ItemStyle-Width="150px" HeaderText="User Name">
<ItemTemplate>
<asp:TextBox ID="txt_UID" runat="server" Text='<%# Eval("UID")%>'
CssClass="AutoCompleteTextBox" Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="150px" />
</asp:TemplateField>
New JavaScriptfunction:
新JavaScript功能：
function setAutoComplete()
{
var textBoxes = document.getElementsByClassName("AutoCompleteTextBox");
for (var i = 0; i < textBoxes.length; i++)
{
addAutoComplete(textBoxes[i].id);
}
}
Next, make your other JavaScriptinto a function that takes a parameter (the id):
接下来，将您的另一个JavaScript变成一个带有参数（id）的函数：
function addAutoComplete(textBoxId) {
$("#" + textBoxId).autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Service.asmx/GetUserNames") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hfUserId.ClientID %>").val(i.item.val);
},
minLength: 1
});
};
Finally, your on ready code changes to just call the wrapper function you created:
最后，您准备好的代码更改为仅调用您创建的包装函数：
$(document).ready(function () { setAutoComplete(); });
Bonus: Here's a way to do it with jQuery only:
奖励：这是一种仅使用 jQuery 的方法：
(just requires the CSS class on the TextBoxes)
（只需要 TextBoxes 上的 CSS 类）
$(document).ready(function () {
$.each($(".AutoCompleteTextBox"), function (i, textBox) {
textBox.autocomplete( /* your code */);
})
});
回答by Mehran Hatami
you can use name attribute and the grid id to find it:
您可以使用 name 属性和网格 ID 来查找它：
<asp:TextBox ID="txt_UID" name="mytextbox" runat="server" Text='<%# Eval("UID")%>'
Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>
the javascript part:
javascript部分：
$("#<%=MyGrid.ClientID %>[name=mytextbox]").autocomplete({});
