使用json数据，实现前台显示用户信息、无序列表、下拉列表、表格？（需要转换成jq）_定义json格式的用户数组。4个属性,使用jquery显示为表格和下拉框-CSDN博客

前台网页

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
  		//一行一行输出 id 姓名  密码
       var user={
			"id":1,
			"name":"张无忌",
			"pwd":"111"
		
		};
		$("#oo").append("id:"+user.id+"<br>").append("用户名："+user.name+"<br>").append("密码："+user.pwd);
		
		//2.
		var arry=["中","美","俄"];
		var $arry=$(arry);
		//实现无序列表
		$arry.each(function(){
			$("#bb").append("<li>"+this+"</li>");
		});
		//实现下拉列表
		$arry.each(function(i){
			$("#aa").append("<option value="+(i+1)+">"+this+"</option>");
		});
		
		//对象数组的定义,同时实现表格
		var userArray=[{
			"id":2,
			"name":"admin",
			"pwd":"123"
		},{
		     "id":3,
			"name":"ad",
			"pwd":"123123"
			
		},{
		
			"id":4,
			"name":"admi",
			"pwd":"123789"
		}];
		
		var $table=$("<table border='1'></table>").append("<tr><td>ID</td><td>用户名</td><td>密码</td></tr>");

		$(userArray).each(function(){
			  $table.append("<tr><td>"+this.id+"</td><td>"+this.name+"</td><td>"+this.pwd+"</td></tr>");
		});
		
		$("#oj").append($table);

若是上述方法不理解，可以使用下面方法，很直观


			 //定义json格式的对象数组，在指定div标签中输出
			//模拟数据库
			var userArray=[
			               {"name":"zhangshan","password":"123"},
			               {"name":"zhangshan","password":"123"},
			               {"name":"zhangshan","password":"123"}
			               ];
			$("#objectDiv1").append("<table border='1'>")
							.append("<tr><th>姓名</th><th>密码</th></tr>");
			for(var i=0;i<userArray.length;i++){
				$("#objectDiv1").append("<tr><td>"+userArray[i].name+"</td><td>"+userArray[i].password+"</td></tr>");
				
			}
			$("#objectDiv1").append("</table>");

});</script>

body部分

</head>
<body>
	<div id="oo"></div><br>
	 <select id="aa"></select>
	 <ul id="bb"></ul>
	 <div id="oj"></div>

<div id="objectDiv1"></div>

</body></html>

测试