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 >  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章