使用列表知识,设计一个宿舍名单网页,包含关键信息,如姓名、学号、性别、班级等。(走读的同学按自己一个宿舍算)
时间: 2024-11-16 17:19:35 浏览: 5
代码走读检查列表[参考].pdf
创建一个宿舍名单网页可以采用HTML、CSS和JavaScript结合后端技术(例如Python的Flask或Django,Node.js的Express等)来实现。以下是基本的设计思路:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>宿舍名单</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h1>宿舍名单</h1>
<table id="studentList">
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>班级</th>
<th>是否走读</th>
</tr>
</thead>
<tbody>
<!-- 这里通过JavaScript动态生成表格行 -->
</tbody>
</table>
<script>
// 假设数据存储在一个数组里,每个对象有name, student_id, gender, class_name 和 is_dormitory属性
const dormData = [
{ name: '张三', student_id: '1001', gender: '男', class_name: '一班', is_dormitory: true },
... // 更多同学数据
];
function displayStudents() {
dormData.forEach(student => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${student.name}</td>
<td>${student.student_id}</td>
<td>${student.gender}</td>
<td>${student.class_name}</td>
<td>${student.is_dormitory ? '是' : '否'}</td>
`;
document.querySelector('#studentList tbody').appendChild(row);
});
}
displayStudents(); // 初始加载时显示数据
</script>
</body>
</html>
```
在这个示例中,我们首先创建了一个简单的HTML结构,包括一个标题和一个表格,用于展示宿舍名单。然后使用JavaScript动态生成表格行,根据预定义的数据数组`dormData`填充。如果是走读学生,对应的“是否走读”列会显示“否”。
阅读全文