JS如何得到Repeater控件里面input控件的ID

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS如何得到Repeater控件里面input控件的ID相关的知识，希望对你有一定的参考价值。

如题，要用javascript不要jquery。
<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>

 参考技术A var SDeadline = document.getElementById("<%=lblDeadline.ClientID%>").value;这样不行
原由：由于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="女"
;

本回答被提问者采纳 参考技术B var Repeater = document.getElementById("<%=Repeater1.ClientID%>");像这样怎么获得的值为Null？
只有一种可能，你的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我把。 参考技术C 把你2个控件的ID改为"lblBegin%# Eval("ID")%"（你这个后台绑定的数据表有ID的吧？？）。
用隐藏域<input id="HiddenData" type="hidden" runat="server"></input>

在后台绑定数据时对这个隐藏域赋值，格式如"id1,id2,id3....."，然后在JS里写document.getElementById("HiddenData" ).value取到这个隐藏域的值，用split方法将其以','分割，存在一个数组里。然后遍历此数组，生成每个变量，形如lblBegin后缀id，如lblBegin1,lblBegin2等，然后循环用document.getElementById取值就可以了。 参考技术D （1）$("#<%=ID.ClientID%>")或者document.getElementById("<%=ID.ClientID%>")
（2）注意repeater如果是服务器端控件则按照（1）中所示来获取ID，上述ID为控件的ID
（3）若是html控件则为document.getElementById("ID")

Repeater 控件的嵌套使用

 

Repeater 控件的嵌套使用

 

  ItemDataBound：数据绑定的时候（正在进行时）发生，多用在Repeater控件嵌套，对子Repeater控件进行数据绑定及模板列中统计列的计算处理等事情

  ItemCommand ：用来响应Item模板中的控件的事件。

 

 绑定数据时，在父Repeater的ItemDataBound事件中绑定子Repeater,在子Repeater的ItemDataBound事件中绑定孙Repeater：

 

                     （外层repeater）

protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)

{

        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)

        {
                   Repeater rep = e.Item.FindControl("Repeater2") as Repeater;               -- 找到里层的repeater对象

                   DataRowView  rowv = (DataRowView)e.Item.DataItem;                           -- 找到分类Repeater关联的数据项 

                     

                  

           //以下是读取Repeater1中绑定数据的字段，用于Repeater2的查询条件
            string strDecide_No =rowv["xxxx"].ToString();
            string strVer_No = rowv["xxxx"].ToString();
             //以下是Repeater2的数据读取和绑定
            string sql = " XXXXXX"; 
           //调用数据操作类执行SQL语句
            rep.DataSource = DB.AccessAdp(sql);
            rep.DataBind();




           }




}

 

以上是关于JS如何得到Repeater控件里面input控件的ID的主要内容，如果未能解决你的问题，请参考以下文章

c#中关于repeater控件的说法

怎么取得repeater中其中一个文本框的值

.net(c#)Repeater控件问题

asp.net中repeater控件里使用一组radiobutton为啥设置了相同groupname还是一组按钮都能选中

WebForm以及WebForm中Repeater控件简单控件使用

2017-5-22 Repeater的Command用法