zoukankan      html  css  js  c++  java
  • 通过JavaScript获取Repeater控件中的子控件

      在使用Repeater控件时,我们可能经常要获取Repeater控件中的子控件,在后台代码中我们可以通过使用FindControl方法来获取Repeater控件中的子控件。但是有时可能需要使用Javascript无刷新地获取Repeater控件的子控件,以前总是觉得使用了像Repeater这样的服务器数据控件后,很难获取到它里面的子控件,后来点击查看页面的源代码发现,其实在生成的客户端代码中,仔细观察会发现,它里面的子控件生成的ID是有规律的,这样我们可以使用jQuery获取到每一个控件。

      在前台页面添加一个Repeater控件,里面添加一个CheckBox控件。

    <div style="300px">
    <asp:Repeater ID="rptCardGift" runat="server">
    <ItemTemplate>
    <asp:CheckBox ID="chkName" runat="server" Width="200px" Text='<%#Eval("Name") %>'/>
    <asp:Label ID="lblPoints" runat="server" Text='<%#Eval("Point") %>'></asp:Label>
    </ItemTemplate>
    </asp:Repeater>
    </div>

      在对Repeater控件进行绑定后,浏览页面,点击查看源代码,客户端生成的html代码如下: 

    <div style="300px">
    <span style="display:inline-block;200px;">
    <input id="rptCardGift_chkName_0" type="checkbox" name="rptCardGift$ctl00$chkName" />
    <label for="rptCardGift_chkName_0">购物金10元</label>
    </span>
    <span id="rptCardGift_lblPoints_0">5</span>
    <span style="display:inline-block;200px;">
    <input id="rptCardGift_chkName_1" type="checkbox" name="rptCardGift$ctl01$chkName" />
    <label for="rptCardGift_chkName_1">电影门票1张</label>
    </span>
    <span id="rptCardGift_lblPoints_1">10</span>
    <span style="display:inline-block;200px;">
    <input id="rptCardGift_chkName_2" type="checkbox" name="rptCardGift$ctl02$chkName" />
    <label for="rptCardGift_chkName_2">迪斯尼乐园门票1张</label>
    </span>
    <span id="rptCardGift_lblPoints_2">15</span>
    </div>

      从上面可以看出,客户端生成的CheckBox控件的ID为"Repeater控件的ID"+"CheckBox控件的ID"+"序号",可以发现所有的checkbox的id的前面部分是一样的,这样我们在Javascript中就可以根据这个规律来查找控件了。

    <script type="text/javascript">
    $(function () {
    $(
    ":checkbox[id^=rptCardGift_chkName]").click(function () {

    });
    });
    </script>

      然后我们可以利用jQuery的parent(),children(),prev(),next()等方法来获取与它相邻、父、子控件了,当然获得控件了,也就可以取得控件的值了。

  • 相关阅读:
    Java知识积累3-XML的DOM解析修改和删除方法
    Java知识积累-XML的DOM解析修改和删除方法
    Java知识积累2-StringReverse实现文字(单词)倒叙输出
    Java知识积累1-StringAlign实现文字居中左右对齐
    String中具有的方法
    有17个人围成一圈,顺序排号。从第一个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下 的是原来第几号的那位
    编写一个程序,求出整数数组中最小元素的下标。如果这样的元素个数大于1,则返回下标最小的数的下标。
    初识
    关于点击跳转页面
    sql存储过程
  • 原文地址:https://www.cnblogs.com/hnsdwhl/p/1944480.html
Copyright © 2011-2022 走看看