### 使用
HTML、CSS和JavaScript创建学生管理系统
#### 构建基本结构
为了构建一个简单的学生管理系统，首先需要定义页面的基本布局。这通常包括表单用于输入数据以及表格展示已有的记录。
```
html
<!DOC
TYPE html>
<
html lang
="en">
<head>
<meta charset
="UTF-8">
<title>Student Management System</title>
<link rel
="stylesheet" href
="styles.css">
<script defer src
="script.js"></script>
</head>
<body>
<header>
<h1>Student Information Manager</h1>
</header>
<main>
<!-- Form to add new students -->
<section id
="add-student-form">
<form action
="#">
<label for
="name">Name:</label><br/>
<input
type="text" name
="name" required /><br/>
<label for
="id">ID Number:</label><br/>
<input
type="number" name
="id" min
="0" step
="1" required /><br/>
<button
type="submit">Add Student</button>
</form>
</section>
<!-- Table displaying all current entries -->
<table border
="1">
<thead>
<tr>
<th>Name</th>
<th>ID No.</th>
<th>Action</th>
</tr>
</thead>
<tbody id
="student-list">
<!-- Rows will be inserted here dynamically via JS -->
</tbody>
</table>
</main>
<footer>© 2023 Simple SIS Demo</footer>
</body>
</
html>
```
此部分设置了文档的整体框架并引入外部样式文件`styles.css`和脚本文件`script.js`[^1]。
#### 设计外观
通过编写CSS来美化界面，使用户体验更加友好：
```css
/* styles.css */
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header h1 {
text-align: center;
background-color: #f4f4f4;
padding: 1em;
}
main {
max-width: 80%;
margin-left: auto;
margin-right: auto;
padding-top: 2em;
}
form label,
form input[
type='text'],
form input[
type='number'] {
display: block;
width: 100%;
margin-bottom: .5rem;
}
form button {
float:right;
}
```
上述代码片段提供了基础样式的设置，使得页面看起来整洁有序。
#### 实现交互逻辑
最后一步是在`script.js`中加入必要的JavaScript代码实现功能性的操作，比如向列表添加新条目或是删除现有项：
```javascript
// script.js
document.addEventListener('DOMContentLoaded', ()
=> {
const form
= document.querySelector('#add-student-form form');
let studentListElement
= document.getElementById('student-list');
function renderStudents(students){
// Clear existing rows first.
while (studentListElement.firstChild) {
studentListElement.removeChild(studentListElement.lastChild);
}
// Add each row back into the table with updated data.
students.forEach((item)
=>{
var tr
= document.createElement("TR");
Object.values(item).forEach(value
=>{
var td
= document.createElement("TD");
td.textContent
=value;
tr.appendChild(td);
});
// Create delete button and attach event listener.
var delBtnTd
=document.createElement("td");
var delButton
=document.createElement("button");
delButton.innerText
="Delete";
delButton.onclick
=()
=>removeItemFromTable(tr);
delBtnTd.appendChild(delButton);
tr.appendChild(delBtnTd);
studentListElement.appendChild(tr);
});
}
function removeItemFromTable(rowToDelete){
if(confirm(`Are you sure? This cannot be
undone.`)){
rowToDelete.remove();
}
}
// Initialize empty array of items when page loads.
window.students
=[];
// Handle adding a new item on submit.
form.onsubmit
=(event)
=>{
event.preventDefault();
// Get values from inputs.
const formData
=new FormData(event.target);
// Convert it to an object literal.
const newItem
={
"Name":formData.get('name'),
"ID No.":formData.get('id')
};
// Push this onto our global list.
students.push(newItem);
// Re-render everything based off latest state.
renderStudents(students);
// Reset form fields after submission.
event.target.reset();
};
});
```
这段JavaScript实现了对学生信息的增删改查等功能，并且能够实时更新显示的内容。
博客围绕HTML展开，介绍了其基础知识，涵盖信息技术领域前端开发方面的关键内容，为相关学习和应用提供基础信息。
扫一扫
1078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
