用jQuery将json数据遍历并显示到页面里的表格

用jQuery将json数据遍历并显示到页面里的表格

 

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>用jQuery将json数据遍历并显示到页面表格</title>
<script src=”js/jquery-1.8.3.js”></script>
<script type=”text/javascript”>

var json = [
{ “name”: “张三”, “sex”: “男”, “age”: “20” },
{ “name”: “李四”, “sex”: “男”, “age”: “18” },
{ “name”: “王五”, “sex”: “男”, “age”: “19” }
];

 

$(function(){
var s = “”;
for(var i = 0; i < json.length; i++) {//遍历出每一行都是三列 每一列放不同的属性名第一列姓名 第二列姓别
s = “<tr><td>” + json[i].name + “</td><td>” + json[i].sex + “</td><td>” + json[i].age + “</td></tr>”;
$(“#tab”).append(s);//在表里再加遍历出的每一行
}
});
</script>
</head>

<body style=”text-align: center;”>
<table border=”1px” id=”tab”>
<caption>遍历的表三行三列</caption>
<tr height=”20px”>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</table><br>
<table border=”1px” id=”tab”>
<caption>未遍历的表一行三列</caption>
<tr height=”20px”>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</table>
</body>

</html>

遍历出来的三列 总共有个数据

姓名 性别 年龄
张三 20
李四 18
王五 19
姓名 性别 年龄
这一行都是没有(md显示必须要两行) 没有遍历的原始表一行三列

转载请保留出处!:精品信息聚合网--只聚合精品信息 » 用jQuery将json数据遍历并显示到页面里的表格

评论 0

评论前必须登录!

登陆 注册