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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue中锚点的三种方法
Jul 06 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简单获取复选框值的方法
2016/05/11 PHP
一个JS翻页效果
2007/07/23 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
马智宇婚礼主持词
2014/03/22 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
助学金感谢信
2015/01/20 职场文书
七一建党节慰问信
2015/02/14 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers
go goth封装第三方认证库示例详解
2022/08/14 Golang