zoukankan      html  css  js  c++  java

  • jQuery遍历对象/数组/集合

    1. 转载自: 网络  
    2.     
    3. 1.jquery 遍历对象  
    4.   
    5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    6. <HTML>  
    7.  <HEAD>  
    8.   <TITLE> New Document </TITLE>  
    9.   <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
    10.   <script  type="text/javascript">  
    11.      $(function(){  
    12.   
    13.        var tbody = "";      
    14.     //------------遍历对象 .each的使用-------------  
    15.       //对象语法JSON数据格式(当server端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使用eval函数进行转化（否则将得不到Object）。本文不作具体介绍server端回调的数据问题，我们将直接自己定义对象)  
    16.     var obj =[{"name":"项海军","password":"123456"}];  
    17.    $("#result").html("------------遍历对象 .each的使用-------------");  
    18.       alert(obj);//是个object元素  
    19.    //以下使用each进行遍历  
    20.    $.each(obj,function(n,value) {   
    21.            alert(n+' '+value);  
    22.            var trs = "";  
    23.              trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";  
    24.              tbody += trs;         
    25.            });  
    26.   
    27.          $("#project").append(tbody);  
    28.        
    29.   });  
    30.   </script>  
    31.  </HEAD>  
    32.    
    33.  <BODY>  
    34.      <div id="result" style="font-size:16px;color:red;"></div>  
    35.     <table cellpadding=5 cellspacing=1 width=620 id="project" border="1" >  
    36.             <tr>  
    37.                 <th>username</th>  
    38.                 <th>password</th>                
    39.             </tr>               
    40.      </table>  
    41.  </BODY>  
    42. </HTML>  
    43.   
    44.   
    45. 2.jQuery遍历数组  
    46.   
    47. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    48. <HTML>  
    49.  <HEAD>  
    50.   <TITLE> New Document </TITLE>  
    51.   <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
    52.   <script  type="text/javascript">  
    53.      $(function(){  
    54.   
    55.        var tbody = "";  
    56.       
    57.      //------------遍历数组 .each的使用-------------  
    58.            var anArray = ['one','two','three'];  
    59.      $("#result").html("------------遍历数组 .each的使用-------------");  
    60.            $.each(anArray,function(n,value) {  
    61.              
    62.             alert(n+' '+value);  
    63.            var trs = "";  
    64.              trs += "<tr><td>" +value+"</td></tr>";  
    65.               tbody += trs;  
    66.             });  
    67.   
    68.           $("#project").append(tbody);  
    69.        
    70.   });  
    71.   </script>  
    72.  </HEAD>  
    73.    
    74.  <BODY>  
    75.     ------------此部分同1中的body部分--------------------  
    76.   
    77.  </BODY>  
    78. </HTML>  
    79.   
    80.   
    81. 3.jQuery 遍历List集合（事实上与遍历一个对象没有太大差别，仅仅是格式上的问题）  
    82.   
    83. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    84. <HTML>  
    85.  <HEAD>  
    86.   <TITLE> New Document </TITLE>  
    87.   <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
    88.   <script  type="text/javascript">  
    89.      $(function(){  
    90.   
    91.        var tbody = "";  
    92.       
    93.      //------------遍历List集合 .each的使用-------------  
    94.       var obj =[{"name":"项海军","password":"123456"},{"name":"科比","password":"333333"}];  
    95.     $("#result").html("遍历List集合 .each的使用");  
    96.       alert(obj);//是个object元素  
    97.    //以下使用each进行遍历  
    98.    $.each(obj,function(n,value) {   
    99.            alert(n+' '+value);  
    100.        var trs = "";  
    101.              trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";  
    102.              tbody += trs;         
    103.            });  
    104.          $("#project").append(tbody);  
    105.        
    106.   });  
    107.   </script>  
    108.  </HEAD>  
    109.    
    110.  <BODY>  
    111.        ------------此部分同1中的body部分--------------------  
    112.   
    113.  </BODY>  
    114. </HTML>  
  • 相关阅读:
    黑产上演《三体》剧情：蠕虫病毒入侵手机群发“钓鱼”短信
    安天AVL联合小米MIUI首擒顽固病毒“不死鸟”
    阿里云存储OSS服务端签名客户端直传
    mariadb 安装配置
    NPOI 打印设置
    windows2008 r2 网络负载均衡搭建
    SqlServer数据库技巧
    达梦数据库备份还原
    ASP.NET CORE Docker发布记录
    DataReader转换
  • 原文地址：https://www.cnblogs.com/wgwyanfs/p/7102582.html
Copyright © 2011-2022 走看看