javascript遍历控件实例详细解析


Posted in Javascript onJanuary 10, 2014

js遍历页面控件,

 var inputArr = document.forms[0];
   for( var i = 0; i < inputArr.length; i++ ) {
    if( inputArr[i].type.toUpperCase() == "BUTTON" ) {
     inputArr[i].disabled="disabled";
    }else if( inputArr[i].type.toUpperCase() == "FILE" ){     
     inputArr[i].readonly=true;
    }
   }
 

 另一种方法:

var Elements = document.getElementsByTagName_r("*");
var msgs;
var i;
for ( i in Elements ) {
if ( Elements[i].type == "text" ) {
alert(Elements[i].value);
}
}

JS遍历控件取值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JS遍历控件取值</title>
    <mce:script type="text/javascript"><!--
    function Submit()
    {
       var Text=document.getElementsByTagName("input");
      var Array="";
        for(var i=0;i<Text.length;i++)
        {
            if(Text[i].type=="text"||Text[i].type=="checkbox")
            {
              Array+=",";
              Array+=Text[i].value;
            }        }
         Array=Array.substring(1,Array.length);
         alert(Array);
    }
// --></mce:script>
</head>
<body>
    <table>
        <tr>
            <td style="width: 100px">
                <input id="Checkbox1" type="checkbox" value="胡果" />胡果</td>
            <td style="width: 100px">
                <input id="Text1" type="text" value="ws_hgo" /></td>
            <td style="width: 100px">
                <input id="Button1" type="button" value="button" onclick="Submit(this)" /></td>
        </tr>
         </table>

</body>
</html>

遍历页面 text控制代码

        function Texts() 
        { 
             //var els= document.getElementsByTagName("*");   //els得到页面所有控件 
             var els= document.getElementsByTagName("INPUT"); //上面的也可,这样可以减少循环 
             var msgs=""; 
             for (var i=0;i<els.length;i++ )  
             { 
                 if (els[i].type == "text" )  
                 { 
                     //取得控件ID 
                     msgs += els[i].id + ","; 
                 } 
             } 
             alert(msgs); 
         }
Javascript 相关文章推荐
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
javascript倒计时效果实现
Nov 12 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 #Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 #Javascript
JS实现根据出生年月计算年龄
Jan 10 #Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 #Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 #Javascript
深入理解JSON数据源格式
Jan 10 #Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 #Javascript
You might like
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
深入理解js promise chain
2016/05/05 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
JS实现复制功能
2017/03/01 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
Python中自定义函数的教程
2015/04/27 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
元旦晚会邀请函
2014/02/01 职场文书
公司授权委托书
2014/10/17 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
工伤调解协议书
2016/03/21 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript