当前位置: 首页 > news >正文

js如何遍历表单所有控件

js如何遍历表单所有控件

一、总结

一句话总结:

 

1、获取form表单里面的的所有元素:通过formelement.elements,这里form元素通过name属性直接定位

var fele=form01.elements;

2、循环遍历获取特定的元素:通过elements[i]的形式

var e=fele[i];

前两步即可遍历表单所有控件

 

3、判断一个控件的类型是不是type:通过element.type

if (e.type=='submit') {

 

 

二、js如何遍历表单所有控件

1、案例截图

 

 

2、案例代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文档</title>
 6     <style type="text/css">
 7     /*    input{background: green}
 8         input[type=submit]{
 9             background: orange
10         }*/
11     </style>
12 </head>
13 <body>
14     <form action="#" method="post" name="form01">
15         <p>昵称:<input type="text" name="username"></p>
16         <p>密码:<input type="password" name="password"></p>
17         <p><input type="submit" value="提交"></p>
18     </form>
19     <script type="text/javascript">
20         function getFele(){
21             var fele=form01.elements;
22             // alert(fele.length)
23             for(var i=0;i<fele.length;i++){
24                 var e=fele[i];
25                 if (e.type=='submit') {
26                     e.style.background='orange'
27                 }else{
28                     e.style.background='green'
29                 }
30                 
31             }
32 
33         }
34         getFele()
35     </script>
36 </body>
37 </html>

 

转载于:https://www.cnblogs.com/Renyi-Fan/p/9146924.html

相关文章:

  • Vue.js 2.x笔记:安装与起步(1)
  • Form身份验证
  • Linux常用命令——runlevel、init
  • python爬虫——爬取豆瓣TOP250电影
  • 携程小程序初体验
  • java虚拟机之垃圾回收算法
  • 10分钟了解JS堆、栈以及事件循环的概念
  • 常见面试题—css实现垂直水平居中
  • hyperLedger fabric 从0到1 + End2EndIT源码解析
  • 天猫校园店一个月签约100家高校!未来要服务2000万高校人群
  • T-SQL 簡易小數處理
  • 基于 CentOS 搭建 WordPress 个人博客
  • eclipse部署jrebel热启动后报错java.lang.OutOfMemoryError: PermGen space问题
  • Powershell渗透测试系列–进阶篇
  • 【leetcode】802. Find Eventual Safe States
  • hexo+github搭建个人博客
  • 分享的文章《人生如棋》
  • 11111111
  • CSS 提示工具(Tooltip)
  • CSS3 变换
  • el-input获取焦点 input输入框为空时高亮 el-input值非法时
  • ES6简单总结(搭配简单的讲解和小案例)
  • iOS 系统授权开发
  • Redux 中间件分析
  • Traffic-Sign Detection and Classification in the Wild 论文笔记
  • 闭包,sync使用细节
  • 高度不固定时垂直居中
  • 关于Android中设置闹钟的相对比较完善的解决方案
  • 机器学习中为什么要做归一化normalization
  • 警报:线上事故之CountDownLatch的威力
  • 罗辑思维在全链路压测方面的实践和工作笔记
  • 我从编程教室毕业
  • 我的业余项目总结
  • 白色的风信子
  • zabbix3.2监控linux磁盘IO
  • ​​​​​​​GitLab 之 GitLab-Runner 安装,配置与问题汇总
  • ​Kaggle X光肺炎检测比赛第二名方案解析 | CVPR 2020 Workshop
  • ![CDATA[ ]] 是什么东东
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • (20050108)又读《平凡的世界》
  • (6)设计一个TimeMap
  • (AtCoder Beginner Contest 340) -- F - S = 1 -- 题解
  • (附源码)springboot高校宿舍交电费系统 毕业设计031552
  • (附源码)springboot掌上博客系统 毕业设计063131
  • (免费领源码)Java#ssm#MySQL 创意商城03663-计算机毕业设计项目选题推荐
  • (源码版)2024美国大学生数学建模E题财产保险的可持续模型详解思路+具体代码季节性时序预测SARIMA天气预测建模
  • (转)C#开发微信门户及应用(1)--开始使用微信接口
  • *Algs4-1.5.25随机网格的倍率测试-(未读懂题)
  • .net core webapi 大文件上传到wwwroot文件夹
  • .NET Framework 3.5中序列化成JSON数据及JSON数据的反序列化,以及jQuery的调用JSON
  • .NET Micro Framework 4.2 beta 源码探析
  • .Net mvc总结
  • .net 发送邮件
  • .net 后台导出excel ,word
  • .NET6实现破解Modbus poll点表配置文件