效果图:
数据采用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>
