用HTML做一个学生信息登记表
时间: 2023-10-12 12:46:25 浏览: 111
好的,以下是使用 HTML 和 JavaScript 实现的学生信息登记表的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>学生信息登记表</title>
<script>
function addStudent() {
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
var age = document.getElementById("age").value;
// 创建一个表格行
var table = document.getElementById("studentTable");
var row = table.insertRow();
// 创建单元格并填充数据
var nameCell = row.insertCell(0);
nameCell.innerHTML = name;
var genderCell = row.insertCell(1);
genderCell.innerHTML = gender;
var ageCell = row.insertCell(2);
ageCell.innerHTML = age;
// 清空输入框
document.getElementById("name").value = "";
document.getElementById("gender").value = "";
document.getElementById("age").value = "";
}
</script>
</head>
<body>
<h1>学生信息登记表</h1>
<label for="name">姓名:</label>
<input type="text" id="name"><br><br>
<label for="gender">性别:</label>
<input type="text" id="gender"><br><br>
<label for="age">年龄:</label>
<input type="text" id="age"><br><br>
<button onclick="addStudent()">添加学生</button>
<table id="studentTable">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</table>
</body>
</html>
```
这个示例中,我们使用 HTML 创建了一个学生信息登记表的表单和一个表格。在 JavaScript 中,我们定义了一个函数 `addStudent()`,用于将填写的学生信息添加到表格中。当用户点击 "添加学生" 按钮时,会触发该函数,并将学生信息插入到表格的新行中。
你可以将该代码复制到一个 HTML 文件中,并在浏览器中打开以查看效果。希望这能满足你的需求!如有其他问题,请随时提问。