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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
Node.js API详解之 os模块用法实例分析
May 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之CodeIgniter学习笔记
2013/06/17 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
vue实现分页组件
2020/06/16 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
Python WSGI的深入理解
2018/08/01 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
高考考python编程是真的吗
2020/07/20 Python
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
Android面试题附答案
2014/12/08 面试题
银行简历自我评价
2014/02/11 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
Python绘画好看的星空图
2022/03/17 Python