HTML/JavaScript中引入json文件
作者： 时间：2023-12-05阅读数：人阅读
1：渲染效果
2；data.json代码
var jsonData = {
"total": 1,
"rows": [
{
"row": 1,
"RealName": "111",
"CardID": "2222",
"StuffPath": "3333",
"AdminId": 1
},
{
"row": 1,
"RealName": "111",
"CardID": "2222",
"StuffPath": "3333",
"AdminId": 1
},
{
"row": 1,
"RealName": "111",
"CardID": "2222",
"StuffPath": "3333",
"AdminId": 1
}
]
}3：html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>json文件数据渲染</title>
<script src="https://blog.csdn.net/weixin_41722928/article/details/js/jquery.js"></script>
<script type="text/javascript" src="https://blog.csdn.net/weixin_41722928/article/details/js/data.json"></script>
<style>
td{
width: 120px;
padding-left: 35px;
}
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<td>姓名</td>
<td>身份证</td>
<td>材料</td>
<td>id</td>
</tr>
</thead >
<tbody id="jsonTip">
</tbody>
</table>
</div>
<script>
// 页面加载完后立刻调用getDate方法
$(function () {
console.log("json文件数据", jsonData);
getShow(jsonData);
})
function getShow(data){
var $jsontip=$("#jsonTip");
// 定义一个变量存储要显示的数据
var s="";
// 清空数据
$jsontip.empty();
// 遍历拿到的数据（此处采用each方法，也可以采用for循环）
$.each(data.rows,function(index,info){
s = "<tr><td>" + info.RealName + "</td><td>" + info.CardID + "</td><td>" +
info.StuffPath + "</td><td>" + info.AdminId + "</td></tr>";
// 将要展示的数据追加到页面
$jsontip.append(s);
})
}
</script>
</body>
</html>
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：licqi@yunshuaiweb.com
