求解为什么点击加载无反应
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑战题</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
*{
font-family:"微软雅黑";
}
.biao{
margin:20px auto;
border-collapse:collapse;
font-size:12px;
text-align:center;
color:#666;
width:300px;
}
.biao td,.biao th{
padding:4px 8px;
border:1px solid #ccc;
}
.biao th{
background-color:#ccc;
}
caption{
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<table class="biao">
<caption>人员信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr >
<td colspan="3">
<input type="button" value="加载" onclick="loadformation()" />
</td>
</tr>
</tbody>
</table>
<script>
var data=[
{"name":张三", "sex":"男", "grade":99"},
{"name":李四", "sex":"女", "grade",25"},
{"name":王五", "sex":"男", "grade":64"},
];
function loadformation(){
var tbody=$(".biao").find("tbody");
tbody.empty();
$.each(data,function(index,f){
tbody.append("<tr><td>"+parseInt(index+1)+"</td><td>"+f.name+"</td><td>"+f.sex+"</td><td>"+f.grade+"</td></tr>")
})
}
</script>
</body>
</html>