<!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" type="text/javascript"></script>
<style>
table{ border-collapse:collapse;
text-align:center;
}
table th{
font-size:16px;
padding:10px;
font-weight:bold;
}
table td{
height:30px;
line-height:30px;
}
</style>
<script>
var Stu_fyi=[
{"name":"AA","age":"20","gender":"female","grade":"3","Class":"2"},
{"name":"BB","age":"21","gender":"male","grade":"2","Class":"4"},
{"name":"CC","age":"22","gender":"female","grade":"3","Class":"5"},
{"name":"DD","age":"20","gender":"female","grade":"1","Class":"1"},
{"name":"EE","age":"22","gender":"male","grade":"3","Class":"6"},
{"name":"FF","age":"23","gender":"female","grade":"1","Class":"2"},
];
$(function(){
$("a").bind('click',function(){
if($("#stu a").text()=='显示学生信息'){
$.each(Stu_fyi,function(index,obj){
$('#stu').before("<tr><td>"+obj.name+"</td><td>"+obj.age+"</td><td>"+obj.gender+"</td><td>"+obj.grade+"</td><td>"+obj.Class+"</td></tr>");
$("#stu a").html("隐藏学生信息");
})
}else{
$("tr:eq(1),tr:eq(2),tr:eq(3),tr:eq(4),tr:eq(5),tr:eq(6)").remove();
$("#stu a").html("显示学生信息");
}
})
})
</script>
</head>
<body>
<table border='1'>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
<th>grade</th>
<th>class</th>
</tr>
<tr id="stu">
<td colspan='5' ><a href="#">显示学生信息</a></td>
</tr>
</table>
<div></div>
</body>
</html>捡到一只蝉
相关分类