|--要求
|--代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>以常见元素展示json数据</title> 6 <style> 7 h1 { 8 color: blue; 9 font-family: 幼圆 10 } 11 </style> 12 <script src="../js/jquery-1.12.4.js"></script> 13 </head> 14 <body> 15 <script> 16 17 $(function () { 18 //加载json数据 19 var usrAarry = [ 20 {userid: 1, username: "王俊凯", address: "老挝国"}, 21 {userid: 2, username: "王源", address: "夜郎国"}, 22 {userid: 3, username: "易烊千玺", address: "黔之国"}, 23 {userid: 4, username: "假粉丝", address: "千鸟国"} 24 ]; 25 //展示表格 26 var tablehead = $("#table").append("<tr><td>序号</td><td>名字</td><td>祖籍</td></tr>"); 27 $(usrAarry).each(function (i, obj) { 28 tablehead.append("<tr><td>" + obj.userid + "</td><td>" + obj.username + "</td><td>" + obj.address + "</td></tr>") 29 }); 30 //展示下拉列表 31 var select = $("#select").append("<option>admin-北京市海淀区-123456</option>"); 32 $(usrAarry).each(function (i, obj) { 33 select.append("<option>" + obj.userid + "--" + obj.username + "--" + "--" + obj.address + "</option>"); 34 }) 35 }); 36 37 38 </script> 39 <h1>将信息展示到表格</h1> 40 <table border="1" id="table"></table> 41 <hr> 42 <h1>将信息展示到下拉列表</h1> 43 <select id="select"> 44 </select> 45 </body> 46 </html>
|--效果
