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 相关文章推荐
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
layui选项卡效果实现代码
May 19 Javascript
JS回调函数深入理解
Oct 16 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
js 操作符实例代码
2009/10/24 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
JS eval代码快速解密实例解析
2020/04/23 Javascript
Linux中Python 环境软件包安装步骤
2016/03/31 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
Python字符串的常见操作实例小结
2019/04/08 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python tkinter canvas使用实例
2019/11/04 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
Python进行特征提取的示例代码
2020/10/15 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
银行介绍信范文
2014/01/10 职场文书
校本教研工作方案
2014/01/14 职场文书
区三好学生主要事迹
2014/01/30 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
vscode中使用npm安装babel的方法
2021/08/02 Javascript
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL