最近在学习用JQuery UI开发一个界面，这是javascript的一个框架，功能强大，界面漂亮。

    首先要下载JQuery UI的包，引入里面的文件：

<link href=http://www.mamicode.com/"jquery-ui.css" rel="stylesheet">>然后是table的设计内容：
<table class="ui-widget ui-widget-content" border="1px">
	<thead>
		<tr class="ui-widget-header">
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
			<td>邮箱</td>
		</tr>
	</thead>
	<tbody id="Data">
	</tbody>
</table>

tbody用于显示json数据
另外我们得准备一个json文件UserInfo.json（和网页放在同级目录下），内容如下：
[
{
"name":"王天",
"sex":"男",
"years":"12",
"email":"hello@gmail.com"
},
{
"name":"小文",
"sex":"女",
"years":"21",
"email":"xiaowen@qq.com"
}
]

接下来就是jQuery代码了：
$(function(){ 
    $("#showDialog").click(function(){  
        getData();//获取json数据  
    });  
    function getData(){//获取json数据的函数  
        $.getJSON("UserInfo.json",function(data){  
            $("#Data").empty();//先清空tbody  
            var strHTML = "";  
            $.each(data,function(InfoIndex,Info){//遍历json里的数据  
                strHTML += "<tr>";  
                strHTML += "<td>"+Info["name"]+"</td>";  
                strHTML += "<td>"+Info["sex"]+"</td>";  
                strHTML += "<td>"+Info["years"]+"</td>";  
                strHTML += "<td>"+Info["email"]+"</td>";  
                strHTML += "</tr>";  
            });  
            $("#Data").html(strHTML);//显示到tbody中  
        });  
    }

这样就能获取json传过来的数据并展示到前台表格里了



JQuery UI获取JSON数据