用html+js写一个学生管理系统
时间: 2023-12-15 14:04:21 浏览: 107
学生管理系统可以包括以下功能:
1. 添加学生信息
2. 修改学生信息
3. 删除学生信息
4. 查看学生信息
5. 按条件查询学生信息
下面是一个简单的示例代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>学生管理系统</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h1>学生管理系统</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name"><br><br>
<label for="age">年龄:</label>
<input type="number" id="age"><br><br>
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male"><label for="male">男</label>
<input type="radio" id="female" name="gender" value="female"><label for="female">女</label><br><br>
<button type="button" onclick="addStudent()">添加学生</button>
</form>
<hr>
<h2>学生列表</h2>
<table id="studentTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="student.js"></script>
</body>
</html>
```
JavaScript代码:
```javascript
// 学生列表数组
var students = [];
// 添加学生
function addStudent() {
// 获取表单数据
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var gender = document.querySelector('input[name="gender"]:checked').value;
// 创建学生对象
var student = {name: name, age: age, gender: gender};
// 添加学生到数组
students.push(student);
// 清空表单数据
document.getElementById("name").value = "";
document.getElementById("age").value = "";
document.querySelector('input[name="gender"]:checked').checked = false;
// 更新学生列表
updateStudentTable();
}
// 删除学生
function deleteStudent(index) {
// 从数组中删除学生
students.splice(index, 1);
// 更新学生列表
updateStudentTable();
}
// 更新学生列表
function updateStudentTable() {
// 获取学生列表表格元素
var studentTable = document.getElementById("studentTable");
// 清空表格内容
studentTable.getElementsByTagName("tbody")[0].innerHTML = "";
// 遍历学生数组,创建表格行并添加到表格中
for (var i = 0; i < students.length; i++) {
var student = students[i];
var row = studentTable.insertRow(i + 1);
row.insertCell(0).innerHTML = student.name;
row.insertCell(1).innerHTML = student.age;
row.insertCell(2).innerHTML = student.gender;
row.insertCell(3).innerHTML = '<button onclick="deleteStudent(' + i + ')">删除</button>';
}
}
```
在这个示例中,我们使用了HTML表单来获取学生信息,然后将学生信息存储在一个JavaScript数组中。通过updateStudentTable()函数,我们可以将学生列表显示在一个HTML表格中,并且可以通过deleteStudent()函数来删除学生信息。你可以根据需要添加更多的功能来完善这个学生管理系统。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)