js获取某个控件的集合并添加属性或事件

   有时候我们要获取一个对象的集合并给此对象添加属性和时间，虽然用cs代码也能实现但总要写一堆的FindControl

本来我们用的服务器控件在客户端展示出来就是html标签，所以理所当然的我们就可以用js实现这样的功能。以一组asp:TextBox控件为例子。

界面很简单

 

首先我们给这五个textbox控件加上不能为空的value；

 

 

 

<script language="javascript">
        document.body.onload = function resets() {
            var controls = document.getElementsByTagName('input');
            for (var i = 0; i < controls.length; i++) { if (controls[i].type == 'text') {

                             controls[i].value = "不能为空！"; //给指定的text添加value          };
                                 }
            }

        } 

    </script>

 

 现在添加一个onfocus事件（聚焦的时候清空此textbox的值）和一个onblur事件（在离开此textbox的时候验证此文本框是否为空，并提示对话框！）代码如下

 

 

 <script language="javascript">
        document.body.onload = function resets() {
            var controls = document.getElementsByTagName('input');
            for (var i = 0; i < controls.length; i++) {
                if (controls[i].type == 'text') {
                    controls[i].value = "不能为空！"; //给指定的text添加value
                    controls[i].onfocus = function() { this.value = ''; }; //聚焦清空text的值
                    controls[i].onblur = function() {
                        if (!this.value.replace(/(^\s*)|(\s*$)/g, "")) {
                            alert(this.value + "不能为空");
                            this.focus;
                        }
                    };
                    //给指定的text添加onblur事件 判断是否为空！
                }
            }

        } 

    </script>

 

效果如下：

效果实现了 但是问题来了 我们的页面上可能还有别的文本框 ，这段js也会对别的文本框有效果，继续改造

我们可以把这几个文本框放到一个table 或div 里面 通过id 来就能限制此js的作用的范围:

 var controls = document.getElementById('OneTable').getElementsByTagName('input');

以上仅仅只是说明批量给某类型的服务器控件添加属性或事件，可能还有错误请谅解。