1 <%-- 2 Created by IntelliJ IDEA. 3 User: L 4 Date: 2019/10/16 5 Time: 16:17 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <title>用户信息</title> 12 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 13 </head> 14 <body> 15 <script type="text/javascript"> 16 $(function () { 17 var json = {"name":"jillion","age":18}; 18 console.log(typeof json); 19 var str = JSON.stringify(json); 20 var obj = JSON.parse(str); 21 var UserArray=[ 22 { "empId": 2012, 23 "empName": "李逵", 24 "gender": "M", 25 "email": "123123@qq.com", 26 "dId": 1, 27 "department": { 28 "deptId": 1, 29 "deptName": "开发部" 30 } 31 }, { 32 "empId": 2013, 33 "empName": "3c1ba0", 34 "gender": "M", 35 "email": "3c1ba0@bdqn.com", 36 "dId": 1, 37 "department": { 38 "deptId": 1, 39 "deptName": "开发部" 40 } 41 }, { 42 "empId": 2014, 43 "empName": "153421", 44 "gender": "M", 45 "email": "153421@bdqn.com", 46 "dId": 1, 47 "department": { 48 "deptId": 1, 49 "deptName": "开发部" 50 } 51 }, { 52 "empId": 2015, 53 "empName": "cd0412", 54 "gender": "M", 55 "email": "cd0412@bdqn.com", 56 "dId": 1, 57 "department": { 58 "deptId": 1, 59 "deptName": "开发部" 60 } 61 }, { 62 "empId": 2016, 63 "empName": "4240d3", 64 "gender": "M", 65 "email": "4240d3@bdqn.com", 66 "dId": 1, 67 "department": { 68 "deptId": 1, 69 "deptName": "开发部" 70 } 71 } 72 ]; 73 var UserArray = $(UserArray); 74 UserArray.each(function (i) { 75 //下拉列表 76 $("#arraySel").append("<option value='"+(i+1)+"'>"+this.department.deptName+"-"+this.empId+"-"+this.empName+"-"+this.email+"</option>"); 77 //ul列表 78 $("#arrayUl").append("<li>"+this.department.deptName+"-"+this.empId+"-"+this.empName+"-"+this.email+"</li>") 79 }) 80 81 //表格 82 var aa = $("#usertable").append("<tr><td>编号</td><td>姓名</td><td>性别</td><td>邮箱</td><td>部门</td></tr>"); 83 $.each(UserArray,function (i, obj) { 84 aa.append("<tr><td>"+(obj.empId)+"</td><td>"+(obj.empName)+"</td><td>"+(obj.gender)+"</td><td>"+(obj.email)+"</td><td>"+(obj.department.deptName)+"</td></tr>") 85 }) 86 }) 87 </script> 88 <select id="arraySel"></select> 89 <ul id="arrayUl"></ul> 90 <table id="usertable" border='1'></table> 91 </body> 92 </html>
