wsy182/SmartRollCall
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
wangsiyuan
2023-12-30 22:44:36 +08:00
parent cf2ff28e58
commit b5dd4b6d7d
10 changed files with 267 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/templates/course-info.html
View File

@@ -7,6 +7,34 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="static/css/layui.css" rel="stylesheet"/>
<style>
.custom-table {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd; /* 轻灰色边框 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
}
.custom-table th, .custom-table td {
text-align: left;
padding: 12px 15px;
border-bottom: 1px solid #ddd; /* 每行之间的分割线 */
}
.custom-table th {
background-color: #f2f2f2; /* 轻灰色背景 */
color: #333; /* 深色文字 */
}
.custom-table tr:hover {
background-color: #f5f5f5; /* 鼠标悬浮时的背景色 */
}
.custom-table td {
color: #555; /* 内容的文字颜色 */
}
</style>
</head>
<body>
@@ -45,27 +73,21 @@
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<blockquote class="layui-elem-quote layui-text">
课程信息
</blockquote>
<table class="layui-table">
<table class="layui-table custom-table">
<!-- 略去colgroup中课程代码的列 -->
<colgroup>
<col width="200">
<col width="150">
<col width="150">
<col width="150">
<col width="100">
<col>
<col width="200">
</colgroup>
<thead>
<tr>
<th>课程名称</th>
<th>课程代码</th>
<th>学分</th>
<th>课程描述</th>
</tr>
</thead>
<tbody>
<!-- 动态生成的课程信息将填充在这里 -->
</tbody>
</table>
</div>
@@ -77,20 +99,22 @@
<script src="static/layui.js"></script>
<script src="/static/js/menu.js"></script>
<script src="/static/js/logout.js"></script>
<script>
$.get('/api/get-course-info', function (courses) {
var tbody = $('.layui-table tbody');
tbody.empty(); // 清空表格现有内容
courses.forEach(function (course) {
var row = '<tr>' +
'<td>' + course.course_name + '</td>' +
'<td>' + course.course_code + '</td>' +
'<td>' + course.credits + '</td>' +
'<td>' + course.description + '</td>' +
'</tr>';
tbody.append(row); // 将新行添加到表格中
});
});
var tbody = $('.layui-table tbody');
tbody.empty(); // 清空表格现有内容
courses.forEach(function (course) {
var row = '<tr>' +
'<td>' + course.course_name + '</td>' +
// 移除课程代码的数据
'<td>' + course.credits + '</td>' +
'<td>' + course.description + '</td>' +
'</tr>';
tbody.append(row); // 将新行添加到表格中
});
}
);
</script>
</body>
</html>