HTML學生管理系統代碼
<!DOCTYPE html>
<html>
<head>
<title>學生管理系統</title>
</head>
<body>
<h1>學生管理系統</h1>
<form id="student-form">
<fieldset>
<legend>添加學生信息</legend>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="age">年齡:</label>
<input type="number" id="age" name="age">
<input type="submit" value="添加">
</fieldset>
</form>
<table id="student-table">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</tbody>
</table>
<script>
// 將表單數據添加到表格中
document.querySelector("#student-form").addEventListener("submit", function(e) {
e.preventDefault(); // 防止表單提交跳轉頁面
var name = document.querySelector("#name").value;
var age = document.querySelector("#age").value;
var tbody = document.querySelector("#student-table tbody");
var tr = document.createElement("tr");
var tdName = document.createElement("td");
var tdAge = document.createElement("td");
tdName.textContent = name;
tdAge.textContent = age;
tr.appendChild(tdName);
tr.appendChild(tdAge);
tbody.appendChild(tr);
// 清空表單
document.querySelector("#name").value = "";
document.querySelector("#age").value = "";
});
</script>
</body>
</html>以上是一個簡單的HTML學生管理系統代碼，包括一個表單用于添加學生信息和一個表格用于展示所有學生的信息。當用戶提交表單時，JavaScript代碼將收集表單數據并將它們添加到表格中。該代碼可供實際使用并進行適當修改以滿足您自己的需求。