JS解析JSON数据到TABLE表格
效果图:
数据采用JSON,
[
{
"时间段": "上午",
"XX小学班课表": [
{
"名称": "教师上班",
"时间": "8:00",
"星期一": "",
"星期二": "",
"星期三": "",
"星期四": "",
"星期五": ""
},
{
"名称": "第一节课",
"时间": "8:30-9:10",
"星期一": "语文",
"星期二": "数学",
"星期三": "语文",
"星期四": "语文",
"星期五": "结合实践活动"
},
{
"名称": "大课间活动",
"时间": "9:10-9:40",
"星期一": "",
"星期二": "",
"星期三": "",
"星期四": "",
"星期五": ""
},
{
"名称": "第二节课",
"时间": "9:45-10:25",
"星期一": "数学",
"星期二": "语文",
"星期三": "书法",
"星期四": "数学",
"星期五": "语文"
},
{
"名称": "眼保健操",
"时间": "10:25-10:30",
"星期一": "",
"星期二": "",
"星期三": "",
"星期四": "",
"星期五": ""
},
{
"名称": "第三节课",
"时间": "10:40-11:20",
"星期一": "道德与法制",
"星期二": "科学",
"星期三": "科学",
"星期四": "道德与法制",
"星期五": "音乐"
}
]
},
{
"时间段": "午休",
"杭州市东冠小学六(6)班课表": [
{
"名称": "午休",
"时间": "11:20-12:50",
"星期一": "",
"星期二": "",
"星期三": "",
"星期四": "",
"星期五": ""
}
]
},
{
"时间段": "下午",
"杭州市东冠小学六(6)班课表": [
{
"名称": "第四节课",
"时间": "13:00-13:35",
"星期一": "英语",
"星期二": "体育与健康",
"星期三": "数学",
"星期四": "英语",
"星期五": "科学"
},
{
"名称": "眼保健操",
"时间": "13:35-13:40",
"星期一": "",
"星期二": "",
"星期三": "",
"星期四": "",
"星期五": ""
},
{
"名称": "第五节",
"时间": "13:50-14:25",
"星期一": "体育与健康",
"星期二": "美术",
"星期三": "体育与健康",
"星期四": "劳动",
"星期五": "信息科学"
},
{
"名称": "第六节",
"时间": "14:35-15:10",
"星期一": "拓展性课程",
"星期二": "美术",
"星期三": "英语",
"星期四": "音乐",
"星期五": "少先队活动"
},
{
"名称": "课外活动",
"时间": "15:10-15:50",
"星期一": "",
"星期二": "",
"星期三": "",
"星期四": "",
"星期五": ""
},
{
"名称": "学生放学",
"时间": "16:00",
"星期一": "",
"星期二": "",
"星期三": "",
"星期四": "",
"星期五": ""
},
{
"名称": "学后托管放学",
"时间": "17:40",
"星期一": "",
"星期二": "",
"星期三": "",
"星期四": "",
"星期五": ""
}
]
}
]
前端, AJAX去获取JSON数据.
<!doctype html>
<html lang="cn">
<head>
<meta charset="utf-8">
<meta http-equiv = "x-ua-compatible" content = "ie=edge">
<meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8">
<meta http-equiv = "Content-Language" content = "zh-CN">
<title>班课表</title>
<meta name = "keywords" content = "班课表" />
<meta name = "description" content = "班课表">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "shortcut icon" href = "../favicon.ico">
<script>var currentmenu = "Json.jsontable";</script>
<style>
body {
font-family:宋体;
}
@media (min-width: 1200px)
.aaaa {
width: 98%;
padding-top: 10px;
}
@media (min-width: 992px)
.aaaa {
width: 970px;
padding-top: 10px;
}
@media (min-width: 768px)
.aaaa {
width: 750px;
padding-top: 10px;
}
row{
margin-right: 0px;
margin-left: 0px;
}
.myTable{
margin: auto;
table-layout: fixed;
font-size: 13px;
border-collapse: collapse;
border: 1px solid #000;
}
caption{
padding: 10px;
font-size: 30px;
font-weight: bold;
}
th,td{
text-align: center;
white-space: nowrap; /* 防止单元格内容换行 */
overflow: hidden; /* 超出单元格范围的内容将被隐藏 */
padding: 0 40px;
border: 1px solid #000;
/* border: 1px dashed #000; */
height: 40px;
}
th{
background: #2196f3;
color: #FFF;
position: -webkit-sticky;
position: sticky;
top: 0; /* TH一直在顶端 */
}
table tbody td{
}
table tbody tr:nth-child(even) {
background-color: #C9C9C9;
}
/* td:nth-child(-n+2) {
text-align: center;
}
table tbody td:nth-child(3),td:nth-child(4) {
text-align: left;
}
table tbody td:nth-child(5),table tbody td:nth-child(6) {
text-align: right;
} */
table tbody tr:hover {
background-color: #ffc107; /* 更改为你想要的颜色 */
}
</style>
</head>
</div>
<div id = "jsonTable"></div>
</div>
<script src = "https://www.saoban.cn/js/vendor/jquery-1.12.4.min.js"></script>
<script src = "https://www.saoban.cn/js/json/public.js"></script>
<script src = "https://www.saoban.cn/js/json/json5-to-table.js">
</script>
<script>
const { generateHTMLTable } = JSON5_TO_TABLE
$(document).ready(function(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState === 4 && this.status === 200){
var dataJson = JSON.parse(this.responseText);
var content = dataJson.data;
if(content){
// console.log(content);
$(this).val(unData(JSON.stringify(content, null, 2)));
var jsonHtmlTable = generateHTMLTable(content, null, {
attributes: {
table: {class: "myTable"},
}
});
$("#jsonTable").html( jsonHtmlTable );
}
}
};
xhr.open("GET", "?id=json", true);
xhr.send();
});
</script>
</body>
