html学生信息管理系统js
时间: 2023-12-23 20:25:57 浏览: 23
以下是一个简单的HTML学生信息管理系统,使用JavaScript实现了添加、删除和编辑学生信息的功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息管理系统</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h1>学生信息管理系统</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">年龄:</label>
<input type="number" id="age" name="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>
<button type="button" onclick="editStudent()">编辑学生</button>
<button type="button" onclick="deleteStudent()">删除学生</button>
</form>
<br>
<table id="studentTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
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);
displayStudents();
}
function editStudent() {
var index = prompt("请输入要编辑的学生的序号:");
if (index !== null) {
var name = prompt("请输入新的姓名:", students[index].name);
var age = prompt("请输入新的年龄:", students[index].age);
var gender = prompt("请输入新的性别:", students[index].gender);
students[index].name = name;
students[index].age = age;
students[index].gender = gender;
displayStudents();
}
}
function deleteStudent() {
var index = prompt("请输入要删除的学生的序号:");
if (index !== null) {
students.splice(index, 1);
displayStudents();
}
}
function displayStudents() {
var table = document.getElementById("studentTable");
var tbody = table.getElementsByTagName("tbody")[0];
tbody.innerHTML = "";
for (var i = 0; i < students.length; i++) {
var student = students[i];
var row = tbody.insertRow(i);
var nameCell = row.insertCell(0);
var ageCell = row.insertCell(1);
var genderCell = row.insertCell(2);
nameCell.innerHTML = student.name;
ageCell.innerHTML = student.age;
genderCell.innerHTML = student.gender;
}
}
</script>
</body>
</html>
```