2.2 获取表单元素数组，存入对象，并遍历输出 p55

最新推荐文章于 2024-08-04 16:33:59 发布

debbyDeng

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量481

点赞数

分类专栏： JS实例文章标签： javascript 对象遍历

本文链接：https://blog.csdn.net/debbyDeng/article/details/51848931

版权

JS实例专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Associative Array</title>
    <style>

    </style>
</head>
<body>

<form id="picker">
    <label>Value 1:</label> <input type="text" id="first" /><br />
    <label>Value 2:</label> <input type="text" id="second" /><br />
    <label>Value 3:</label> <input type="text" id="third" /><br />
    <label>Value 4:</label> <input type="text" id="four" /><br />
    <button id="validate">Validate</button>
</form>
<div id="result"></div>
<script type="text/javascript">
    var btn=document.getElementById("validate");
    btn.addEventListener("click",validate,false);
    function validate(event){
        event.preventDefault();
        var obj=new Object();
        //取得form中的表单元素的数组。
var arr=document.getElementById("picker").elements;
        alert(arr.length);
        //遍历elements得到的数组，将值传入对象
    for(var i=0;i<arr.length;i++){
        if(arr[i].type=="text"){
            obj[arr[i].id]=arr[i].value;
        }
    }
        var str="";
        //对象的遍历
       for(var key in obj){
         str+=key + '->' + obj[key] + '<br />';
       }

/*上面对对象的遍历，还可以使用Object.keys()方法:

 Object.keys(obj).forEach(function(key){
         str+=key + '->' + obj[key] + '<br />';
       });

Object.keys() 方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致（两者的主要区别是 for-in 还会遍历出一个对象从其原型链上继承到的可枚举属性）。

*/
        document.getElementById("result").innerHTML=str;
    }
</script>
</body>
</html>

debbyDeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.2 获取表单元素数组，存入对象，并遍历输出 p55

获取表单元素数组，存入对象，并遍历输出
复制链接

扫一扫

专栏目录