其他分享
首页 > 其他分享> > jquery遍历对象,数组,集合

jquery遍历对象,数组,集合

作者:互联网

1.jquery遍历对象  
  
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML > <HEAD > <TITLE > New Document < /TITLE>  
  <script language="javascript" type="text/javascript " src="jquery.min.js "></script>  
  <script  type="text / javascript ">  
     $(function(){  
       var tbody = "";      
    //------------遍历对象 .each的使用-------------  
      //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使用eval函数进行转化(否则将得不到Object)。本文不作详细介绍服务器端回调的数据问题,我们将直接自定义对象)  
    var obj =[{"name ":"项海军","password ":"123456 "}];  
   $("#result ").html("------------遍历对象.each的使用-------------");  
      alert(obj);//是个object元素  
   //下面使用each进行遍历  
   $.each(obj,function(n,value) {   
           alert(n+' '+value);  
           var trs = "";  
             trs += " < tr > <td > " + value.name +" < /td> <td>" + value.password +"</td > </tr>";  
             tbody += trs;         
           });  
  
         $("#project").append(tbody);  
       
  });  
  </script > </HEAD>  
   
 <BODY>  
     <div id="result" style="font-size:16px;color:red;"></div > 
     <table cellpadding = 5 cellspacing = 1 width = 620 id = "project"border = "1" > 
     <tr > 
     <th > 用户名 < /th>  
      <th>密码</th > 
      </tr>               
     </table > </BODY>  
</HTML >  
  
2.jQuery遍历数组  
  
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML > <HEAD > <TITLE > New Document < /TITLE>  
  <script language="javascript" type="text/javascript " src="jquery.min.js "></script>  
  <script  type="text / javascript ">  
     $(function(){  
  
       var tbody = "";  
      
     //------------遍历数组 .each的使用-------------  
           var anArray = ['one','two','three'];  
     $("#result ").html("------------遍历数组.each的使用-------------");  
           $.each(anArray,function(n,value) {  
             
            alert(n+' '+value);  
           var trs = "";  
             trs += " < tr > <td > " +value+" < /td></tr > ";  
              tbody += trs;  
            });  
  
          $("#project ").append(tbody);  
       
  });  
  </script>  
 </HEAD>  
   
 <BODY>  
     <div id="result" style="font-size:16px;color:red;"></div > <table cellpadding = 5 cellspacing = 1 width = 620 id = "project"border = "1" > <tr > <th > 用户名 < /th>  
                <th>密码</th > </tr>               
     </table > </BODY>  
</HTML >  
  
  
3.jQuery 遍历List集合(其实与遍历一个对象没有太大区别,只是格式上的问题)  
  
<!DOCTYPE HTML PUBLIC " - //W3C//DTD HTML 4.0 Transitional//EN">  
< HTML > <HEAD > <TITLE > New Document < /TITLE>  
  <script language="javascript" type="text/javascript " src="jquery.min.js "></script>  
  <script  type="text / javascript ">  
     $(function(){  
  
       var tbody = "";  
      
     //------------遍历List集合 .each的使用-------------  
      var obj =[{"name ":"项海军","password ":"123456 "},{"name ":"科比","password ":"333333 "}];  
    $("#result ").html("遍历List集合.each的使用");  
      alert(obj);//是个object元素  
   //下面使用each进行遍历  
   $.each(obj,function(n,value) {   
           alert(n+' '+value);  
       var trs = "";  
             trs += " < tr > <td > " +value.name+" < /td> <td>" + value.password +"</td > </tr>";  
             tbody += trs;         
           });  
         $("#project").append(tbody);  
       
  });  
  </script > </HEAD>  
   
  <BODY>  
     <div id="result" style="font-size:16px;color:red;">
     </div > 
     <table cellpadding = 5 cellspacing = 1 width = 620 id = "project" border = "1" > 
     <tr > 
     <th > 用户名 < /th>  
     <th>密码</th > 
     </tr>               
     </table >
     </BODY>  
</HTML >  

标签:jquery,遍历,tbody,value,数组,each,var,trs
来源: https://blog.csdn.net/qq_40288377/article/details/95604848