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中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
vue实现整屏滚动切换
Jun 29 Javascript
JavaScript代码实现简单计算器
Dec 27 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+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
详解vue v-model
2020/08/31 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
详解Swift中属性的声明与作用
2016/06/30 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
使用python实现画AR模型时序图
2019/11/20 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
如何设置Java的运行环境
2013/04/05 面试题
干部鉴定材料
2014/05/18 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android
SQL Server 中的事务介绍
2022/05/20 SQL Server