jQuery解析JSON

chaochaoyuyu

浏览: 53810 次
性别:
来自: 宁波

最近访客更多访客>>

黑人红花侠

fanpingany

cuijia

Gin_Scotch

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>
		<style type="text/css">
        .datalist {
        	width:200px;
            border: 1px solid #0058a3;
            font-family: Arial;
            border-collapse: collapse;
            background-color: #eaf5ff;
            font-size: 14px;
        }
        .datalist th {
            border: 1px solid #0058a3;
            background-color: #4bacff;
            color: #FFFFFF;
            font-weight: bold;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 12px;
            padding-right: 12px;
            text-align: center;
        }
        .datalist td {
            border: 1px solid #0058a3;
            text-align: center;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 10px;
            padding-right: 10px;
        }
        .datalist tr.altrow {
            background-color: #c7e5ff;
        }
		</style>
		<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
		<script type="text/javascript">
			var data={
				root:
					[					
					{name:'6101',value:'西安市'},
					{name:'6102',value:'铜川市'},
					{name:'6103',value:'宝鸡市'},
					{name:'6104',value:'咸阳市'},
					{name:'6105',value:'渭南市'},
					{name:'6106',value:'延安市'},
					{name:'6107',value:'汉中市'},
					{name:'6108',value:'榆林市'},
					{name:'6109',value:'安康市'},
					{name:'6110',value:'商洛市'}
					]
				}; 
			$(document).ready(function(){
				//$.each(data.root,function(index,item){alert(item.value);});
			});
			
			function refresh(){
				$("#ajax").html('');
				var content="<table class=\"datalist\">";
				content+="<tr>";
					content+="<th>";
						content+='名称';
					content+="</th>";
					content+="<th>";
						content+='值';
					content+="</th>";
				content+="</tr>";
					$.each(data.root,function(index,item){
						if(index%2==0){
							content+="<tr>";
						}else{
							content+="<tr class=\"altrow\">";
						}
						
							content+="<td>";
								content+=item.name;
							content+="</td>";
							content+="<td>";
								content+=item.value;
							content+="</td>";
						content+="</tr>";
					});
				content+="</table>";
				$("#ajax").append(content);
			}
		</script>
	</head>
	<body>
		<input type="button" value="刷新" onclick="refresh()"/>
		<div id="ajax">
			
		</div>
	</body>
</html>

分享到：