JS如何得到Repeater控件里面input控件的ID
<input id="lblBegin" runat="server" value="lblBegin" type="text" style="display:none;" text='<%# Eval("Begin")%>' />
<input id="lblDeadline" runat="server" value="lblDeadline" type="text" style="display:none;" text='<%# Eval("Deadline")%>' />
上面2个控件在Repeater里面,用Js如何获得ID
var SDeadline = document.getElementById("<%=lblDeadline.ClientID%>").value;这样不行
谢谢一楼的回答,但我只需要用javascript获得
也不是位置的问题
var Repeater = document.getElementById("<%=Repeater1.ClientID%>");像这样怎么获得的值为Null
5楼的,我的Repeater控件的Id就是Repeater1,原因是4楼说的,Repeater1不产生HTML代码,但怎么解决呢。。。高手们啊,解决了在加分.... 展开
你要想获得Repeater里服务器控件(runat="server")的值 必须先知道Repeater里服务器控件ID的命名方式 如果你的页面里的数据只是只读数据可以采用“pwroselove”提供的方法 去掉runat="server" 自己为控件的ID命名 如果你需要和后台交互 就可以用下面的方法
首先Repeater里服务器控件ID的命名方式是 Repeater.ClientID_ctl行号_控件名 行号是从00开始的两位数00 01 02... 如 Repeater1_ctl00_lblBegin 表示Repeater里第一行lblBegin的ID 给你写个例子你就明白了 代码如下
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
using (DataTable dataTable = new DataTable())
{
dataTable.Columns.AddRange(new DataColumn[] { new DataColumn("Begin"), new DataColumn("Deadline") });
dataTable.Rows.Add(new object[] { "123", "A" });
dataTable.Rows.Add(new object[] { "234", "B" });
dataTable.Rows.Add(new object[] { "345", "C" });
Repeater1.DataSource = dataTable;
Repeater1.DataBind();
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<input id="lblBegin" runat="server" value='<%# Eval("Begin")%>' type="text" />
<input id="lblDeadline" runat="server" value='<%# Eval("Deadline")%>' type="text" />
<br />
<br />
</ItemTemplate>
</asp:Repeater>
</div>
<script type="text/javascript">
var repeaterId = '<%=Repeater1.ClientID %>';//Repeater的客户端ID
var rows = <%=Repeater1.Items.Count%>;//Repeater的行数
for (var i = 0; i < rows; i++) {
alert(document.getElementById(repeaterId + "_ctl" + getrownumber(i) + "_lblBegin").value);
alert(document.getElementById(repeaterId + "_ctl" + getrownumber(i) + "_lblDeadline").value);
}
function getrownumber(i) {
if (i > 10) {
return i;
}
else {
return '0' + i;
}
}
</script>
</form>
</body>
</html>
原由:由于lblDeadline空间由Repeater控件包裹 所以(
"<%=lblDeadline.ClientID%>"这种方式肯定是报错的。)
var Repeater = document.getElementById("<%=Repeater1.ClientID%>");像这样怎么获得的值为Null
原由:Repeater控件的特性所致,"她不生成任何HTML代码"。
下面写了个列子 希望可以帮到你。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Repeater.aspx.cs" Inherits="Repeater" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Repeater==Learn</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("btnGetAll").onclick = getIDs;
}
function getIDs() {
var tabPerson = document.getElementById("tabPerson");
var inputs = tabPerson.getElementsByTagName("input");
var s = "";
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type != "text") continue;
if (s=="")
s = inputs[i].text;
else
s += "," + inputs[i].text;
}
document.getElementById("divIDs").innerHTML = s;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="btnGetAll" value="获取全部ID" />
<div id="divIDs">
</div>
<table id="tabPerson" border="1" style="border-collapse: collapse" width="100%">
<thead>
<tr>
<td>
ID
</td>
<td>
Name
</td>
<td>
Sex
</td>
<td>
Op
</td>
</tr>
</thead>
<tbody>
<asp:Repeater ID="rptPerson" runat="server">
<ItemTemplate>
<tr>
<td>
<input id="lblBegin" runat="server" value="lblBegin" type="text" style="display: none;"
text='<%# Eval("ID")%>' />
<%#Eval("ID") %>
</td>
<td>
<%#Eval("Name")%>
</td>
<td>
<%#Eval("Sex")%>
</td>
<td>
<input type="button" value="Client获取当前行ID" onclick="alert( '<%#Eval("ID") %>')"/>
<asp:Button ID="btnGetCurrentRowID" Text="Server获取当前行ID" runat="server" CommandArgument='<%#Eval("ID") %>' CommandName="getId"/>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Repeater : System.Web.UI.Page
{
protected override void OnInit(EventArgs e)
{
rptPerson.ItemCommand += new RepeaterCommandEventHandler(rptPerson_ItemCommand);
base.OnInit(e);
}
void rptPerson_ItemCommand(object source, RepeaterCommandEventArgs e)
{
string val = string.Empty;
switch (e.CommandName)
{
case "getId":
val = e.CommandArgument.ToString();
break;
default:
val = "没有此命令";
break;
}
this.ClientScript.RegisterClientScriptBlock(this.GetType(), "msg", "alert('" + val + "')", true);
}
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack) return;
rptPerson.DataSource = new Person().GetData();
rptPerson.DataBind();
}
}
class Person
{
public int ID { get; set; }
public string Name { get; set; }
public string Sex { get; set; }
public List<Person> GetData()
{
return new List<Person>(){
new Person(){ID=1,Name="张三",Sex="男"},
new Person(){ID=2,Name="李四",Sex="男"},
new Person(){ID=3,Name="王八",Sex="男"},
new Person(){ID=4,Name="张三",Sex="男"},
new Person(){ID=5,Name="李四",Sex="男"},
new Person(){ID=6,Name="王八",Sex="男"},
new Person(){ID=7,Name="张三",Sex="男"},
new Person(){ID=8,Name="李四",Sex="男"},
new Person(){ID=9,Name="王八",Sex="男"},
new Person(){ID=10,Name="张三",Sex="男"},
new Person(){ID=11,Name="李四",Sex="男"},
new Person(){ID=12,Name="王八",Sex="男"},
new Person(){ID=13,Name="张三",Sex="男"},
new Person(){ID=14,Name="李四",Sex="男"},
new Person(){ID=15,Name="王八",Sex="男"},
new Person(){ID=16,Name="张三",Sex="男"},
new Person(){ID=17,Name="李四",Sex="男"},
new Person(){ID=18,Name="王八",Sex="男"},
new Person(){ID=19,Name="张三",Sex="男"},
new Person(){ID=20,Name="李四",Sex="男"},
new Person(){ID=21,Name="王八",Sex="男"},
new Person(){ID=22,Name="张三",Sex="男"},
new Person(){ID=23,Name="李四",Sex="男"},
new Person(){ID=24,Name="张三",Sex="男"},
new Person(){ID=25,Name="李四",Sex="男"},
new Person(){ID=26,Name="翠花",Sex="女"}
};
}
}
只有一种可能,你的repeater的ID不是Repeater1
然后你的input既然是在Repeater里面那么肯定是一行一个,而不是唯一的,所以你这样定义ID是错误的,而应该如下:
<input id="lblBegin<%# (Container.ItemIndex)%>" value="lblBegin" type="text" style="display:none;" text='<%# Eval("Begin")%>' />
这样ID才会是唯一的,然后Container.ItemIndex是从0开始算的行数,所以你的JS函数得加个ID参数,如:
function getid(rowid)
{
var SDeadline = document.getElementById("lblBegin"+rowid).value;
}
这里把你input的runat="server"的属性去掉了,你都不需要从后台获取数据,干吗还设置成runat="server"?
PS:刚仔细看了一下,,确实没有输出html代码,给 huangpeng0419道歉,回答还是有用的。
然后ItemTemplate里面是有输出的,得到里面的input的ID不就行了?按我上面的方法得到ItemTemplate里面的input的ID是没有问题的,我就是这样做的,再有问题就HI我把。
用隐藏域<input id="HiddenData" type="hidden" runat="server"></input>
在后台绑定数据时对这个隐藏域赋值,格式如"id1,id2,id3.....",然后在JS里写document.getElementById("HiddenData" ).value取到这个隐藏域的值,用split方法将其以','分割,存在一个数组里。然后遍历此数组,生成每个变量,形如lblBegin后缀id,如lblBegin1,lblBegin2等,然后循环用document.getElementById取值就可以了。
(2)注意repeater如果是服务器端控件则按照(1)中所示来获取ID,上述ID为控件的ID
(3)若是html控件则为document.getElementById("ID")