1. 程式人生 > >js 獲取 repeater 控制元件值

js 獲取 repeater 控制元件值

你要想獲得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" %>

<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>

<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>