jquery ajax json 2

xujunJ2EE · 发表于 2013-2-7 19:58:27

下面是一个多表头的数据处理
json：
[
{
"name":"xujun",
"sex":"男",
"home":["nanjing","zhengjiang","beijing"]
},
{
"name":"jack",
"sex":"女",
"home":["广州","湖北"]
}
]
html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.titleTD
{
border:solid 1px;
}
</style>
<script src="../jquery.js"></script>
<script>
$(document).ready(function(){
$('#grid td').addClass('titleTD');
$('#btnData').click(function(){
$.getJSON('jsonData.json?id=1',function(data){
//遍历JSON中的每个entry

$.each(data,function(entryIndex,entry){
var html='<tr>';
html+='<td>'+entry['name']+'</td>';
html+='<td>'+entry['sex']+'</td>';
$.each(entry['home'],function(index,home){
html+='<td>'+home+'</td>';
});
html+='</tr>';
$('#title').after(html);

});
});
});

});
</script>

</head>
<body>
<table id="grid" cellpadding=0 cellspacing=0>
<tr>
         <td rowspan="2">姓名</td>
         <td rowspan="2">性别</td>
         <td colspan="3">地址</td>
      </tr>
      <tr id="title">
         <td>工作地址</td>
         <td>家庭地址</td>
         <td>学校地址</td>
      </tr>
</table>
<button id="btnData">获得数据</button>
</body>
</html>

		自动登录	找回密码
密码			立即注册