javascript遍历控件实例详细解析

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);
         }

赞 (0)

相关推荐

  • javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）

    本文实例讲述了javascript实现网页子页面遍历回调的方法(涉及 window.frames.递归函数.函数上下文).分享给大家供大家参考.具体如下: 提炼于本人手写的纯 JavaScript 工具程序,用于遍历当前网页的所有子页面 并执行迭代回调,且回调函数返回值可用于结果回传,有助于减少闭包变量~ 其特点在于 -- 递归遍历时只检索子页面的 Window 对象,不立即执行回调函数,而是在检索结束后在普通循环结构中回调.这样可以尽量减少 递归调用时的内存消耗,也简化了程序结构,易于维护 全

  • javascript 回调函数详解

    回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. 在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A.我们就说函数A叫做回调函数.如果没有名称(函数表达式),就叫做匿名回调函数.因此callback

  • javascript数组遍历for与for in区别详解

    js中遍历数组的有两种方式 复制代码 代码如下: var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){     alert(array[i]) } //foreach循环 for(var i in array){     alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key

  • JavaScript中遍历对象的property的3种方法介绍

    JavaScript中遍历对象的property的3种方法介绍

    在JavaScript中,可以用三种方法来遍历对象的property: 1.for/in.可以使用for/in语句遍历对象自身的property(Own Property)及其从原型对象处继承的property,只有enumerable的property才会被遍历到. 2.Object.keys().可以将对象作为参数传入Object.keys(),Object.keys()语句将返回由所有property名称字符串所组成的数组.Object.keys()语句仅返回对象自身的(Own Prope

  • Javascript 遍历页面text控件详解

    以下函数实现了列出页面中所有html控件类型为text的控件ID 复制代码 代码如下: function Texts()         {              //var els= document.getElementsByTagName("*");   //els得到页面所有控件              var els= document.getElementsByTagName("INPUT"); //上面的也可,这样可以减少循环          

  • 理解javascript回调函数

    把函数作为参数传入到另一个函数中.这个函数就是所谓的回调函数 经常遇到这样一种情况,某个项目的A层和B层是由不同的人员协同完成.A层负责功能funA,B层负责funcB.当B层要用到某个模块的数据,于是他对A层人员说,我需要你们提供满足某种需求的数据,你给我提供一个接口. A层的人员说:我给你提供数据,怎么展示和处理则是B的事情. 当然B层不可能为你每个需求都提供一个数据接口,B给A提供一个通过的接口.B得到数据,然后B写函数去展示. 即,你需要和其他人合作,别人提供数据,而你不需要关注别人获取

  • 浅谈javascript回调函数

    把函数作为参数传入到另一个函数中.这个函数就是所谓的回调函数 经常遇到这样一种情况,某个项目的A层和B层是由不同的人员协同完成.A层负责功能funA,B层负责funcB.当B层要用到某个模块的数据,于是他对A层人员说,我需要你们提供满足某种需求的数据,你给我提供一个接口. A层的人员说:我给你提供数据,怎么展示和处理则是B的事情. 当然B层不可能为你每个需求都提供一个数据接口,B给A提供一个通过的接口.B得到数据,然后B写函数去展示. 即,你需要和其他人合作,别人提供数据,而你不需要关注别人获取

  • Javascript Jquery 遍历Json的实现代码

    复制代码 代码如下: /* author: liulf function: var __db_cpcj=vCpcj; var __db_cp=vCp; var vCp={"cppage":[ {"cpdh":"A01000101","page":"1","ca":"1309-36-0","mc":"硫铁矿","enam

  • javascript遍历控件实例详细解析

    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.toUpperCa

  • javascript表单控件实例讲解

    本文实例为大家分享js表单控件多个实例讲解,供大家参考,具体内容如下 实例一:遍历表单的所有控件 <script type="text/javascript"> //遍历表单的所有控件 function getValues(){ var f = document.forms[0]; //获取表单DOM var elements = f.elements; //获取所有的控件数组 var str = ''; //拼接字符串 //循环遍历 for(var i=0; i<e

  • python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例

    PyQt5日期时间控件QDateTimeEdit介绍 QDateTimeEdit是一个允许用户编辑日期时间的控件,可以使用键盘上的上下键头按钮来增加或减少日期的时间值,QDateTimeEdit通过setDisplayFormat()函数来设置显示的日期时间格式 QDateTimeEdit类中常用方法 方法 描述 setDisplayFormat 设置日期的时间格式 yyyy:代表年份,用4为数表示 MM:代表月份,取值范围01-12 dd:代表日,取值范围01-31 HH:代表小时,取值范围0

  • python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例

    PyQt5滚动条控件QScrollBar简介 可以看到,前面介绍的几个窗口控件的共同点是新建一些窗口来装载更多的控件,而QScrollBar提供了另一种思路:这个控件提供水平的或垂直的滚动条,这样可以扩大当前窗口的有效装载面积,从而装载更多的控件 QScrollBar类中常用的信号 信号 含义 valueChanged 当滑动条的值改变发射此信号 sliderMoved 当用户拖动滑块时发射此信号 QScrollBar的使用实例 import sys from PyQt5.QtWidgets i

  • Qt GUI图形图像开发之QT表格控件QTableView详细使用方法与实例

    QT表格控件QTableView简介 ​ 表格视图控件QTableView,需要和QStandardItemModel, 配套使用,这套框架是基于MVC设计模式设计的,M(Model)是QStandardItemModel数据模型,不能单独显示出来.V(view)是指QTableView视图,要来显示数据模型,C(controllor)控制在Qt中被弱化,与View合并到一起. QTableView简单使用实例 ​ QStandardItmeModel表格的数据模型,那么这个模型需要填上每一行每

  • Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例

    Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例

    效果DEMO:http://www.never-online.net/tutorial/js/upload/Javascript & DHTML 实例编程(教程)(三),初级实例篇-上传文件控件实例上章基本上把要交代的基本知识都说了一些,今天终于开始写代码了:D首先来做一个实例,批量上传的UI控件.以后一般做的示例也是以UI控件为主的.都是封装成Object或者用Function封装成"Class"类. 也许对于单单看前几章的朋友来说这个例子过于深奥了,但是不用担心,一步步来解

  • C#遍历DataSet控件实例总结

    本文实例总结了C#遍历DataSet控件的方法.分享给大家供大家参考.具体方法如下: DataSet控件在.net主要是用来存储数据的,它更像一个表格或数组,下面就来给大家简单介绍C#遍历DataSet控件实例. 复制代码 代码如下: for(i=0;i<ds.table[0].Row.Count;i++) {    string str=ds.table[0].Row[i][0];//第I排第一列的值    string str1=ds.table[0].Row[i][1];//第I排第二列的

  • python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例

    python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例

    QTimer控件介绍 如果在应用程序中周期性地进行某项操作,比如周期性的检测主机的cpu值,则需要用到QTimer定时器,QTimer类提供了重复和单次的定时器,要使用定时器,需要先创建一个QTimer实例,将其Timeout信号连接到槽函数,并调用start(),然后,定时器,会以恒定的间隔发出timeout信号 当窗口的控件收到Timeout信号后,他就会停止这个定时器,这是在图形用户界面中实现复杂工作的一个典型用法,随着技术的进步,多线程在越来越多的平台上被使用,QTimer对象会被替代掉

  • python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例

    PyQt5单行文本框控件QLineEdit介绍 QLineEdit类是一个单行文本框控件,可以输入单行字符串. QLineEdit类中常用的方法如下表 方法 描述 setAlignment() 按固定值方式对齐文本 Qt.AlignLeft:水平方向靠左对齐 Qt.AlignRight:水平方向靠右对齐 Qt.AlignCenter:水平方向居中对齐 Qt.AlignJustify:水平方向调整间距两端对齐 Qt.AlignTop:垂直方向靠上对齐 Qt.AlignBottom:垂直方向靠下对齐

  • python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例

    PyQt5下拉列表框控件QComboBox介绍 QComboBox是一个集按钮和下拉选项于一体的控件,也称做下拉列表框 QComboBox类中的常用方法如表 方法 描述 addItem() 添加一个下拉选项 addItems() 从列表中添加下拉选项 Clear() 删除下拉选项集合中的所有选项 count() 返回下拉选项集合中的数目 currentText() 返回选中选项的文本 itemText(i) 获取索引为i的item的选项文本 currentIndex() 返回选中项的索引 set

随机推荐