一个学生信息管理系统网页版代码
时间: 2024-01-03 12:04:25 浏览: 72
以下是一个简单的学生信息管理系统网页版的代码示例,使用HTML、CSS和JavaScript编写:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>学生信息管理系统</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>学生信息管理系统</h1>
</header>
<main>
<div id="form-container">
<h2>添加学生信息</h2>
<form id="student-form">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<label for="id">学号:</label>
<input type="text" id="id" name="id" required><br>
<label for="major">专业:</label>
<input type="text" id="major" name="major" required><br>
<label for="grade">年级:</label>
<input type="text" id="grade" name="grade" required><br>
<button type="submit">添加</button>
</form>
</div>
<div id="table-container">
<h2>学生信息列表</h2>
<table id="student-table">
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
<th>专业</th>
<th>年级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 这里用JavaScript动态生成表格行 -->
</tbody>
</table>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
#form-container {
margin-bottom: 20px;
}
h2 {
margin-top: 0;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
}
input[type="text"] {
padding: 5px;
border-radius: 5px;
border: none;
margin-bottom: 10px;
}
button[type="submit"] {
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
border: none;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #666;
}
table {
border-collapse: collapse;
}
thead {
background-color: #333;
color: #fff;
}
th, td {
padding: 10px;
border: solid 1px #ccc;
}
td:last-child {
text-align: center;
}
td:last-child button {
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
border: none;
cursor: pointer;
}
td:last-child button:hover {
background-color: #666;
}
```
JavaScript代码:
```
// 这里用一个数组来保存学生信息
var students = [];
// 获取表单和表格
var form = document.getElementById("student-form");
var table = document.getElementById("student-table");
// 给表单添加提交事件
form.addEventListener("submit", function(e) {
// 阻止表单默认提交行为
e.preventDefault();
// 获取表单输入的值
var name = document.getElementById("name").value;
var id = document.getElementById("id").value;
var major = document.getElementById("major").value;
var grade = document.getElementById("grade").value;
// 将输入的值保存到数组中
students.push({
name: name,
id: id,
major: major,
grade: grade
});
// 清空表单
form.reset();
// 渲染表格
renderTable();
});
// 渲染表格
function renderTable() {
// 先清空表格内容
table.getElementsByTagName("tbody")[0].innerHTML = "";
// 循环遍历数组,逐个添加表格行
for (var i = 0; i < students.length; i++) {
var row = table.insertRow(-1);
row.insertCell(0).innerHTML = students[i].name;
row.insertCell(1).innerHTML = students[i].id;
row.insertCell(2).innerHTML = students[i].major;
row.insertCell(3).innerHTML = students[i].grade;
// 在每行最后一列添加一个删除按钮
var deleteButton = document.createElement("button");
deleteButton.innerHTML = "删除";
deleteButton.addEventListener("click", function() {
// 获取当前行的索引
var index = this.parentNode.parentNode.rowIndex - 1;
// 从数组中删除该学生信息
students.splice(index, 1);
// 重新渲染表格
renderTable();
});
row.insertCell(4).appendChild(deleteButton);
}
}
// 页面加载完毕后,渲染一次表格
window.addEventListener("load", function() {
renderTable();
});
```
这个示例实现了一个简单的学生信息管理系统,包括添加学生信息和删除学生信息两个功能。你可以根据自己的需求修改和扩展这个代码。