種子論壇 | 高雄市資訊培育協會學員討論區

<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: Arial, sans-serif;
}
header{
background-color: #ddd;
text-align: center;
}
input{
width: 30%;
padding: 8px;
margin-bottom: 10px;
}
button{
color: white;
background-color: #4caf50;
border: 0;
margin-top: 20px;
padding: 5px 10px;
}
select{
width: 30%;
padding: 8px;
}
table{
width: 100%;
}
table td{
border: 1px solid #555;
padding: 8px;
width: 100%;
}
</style>
</head>
<body>
<header><h1>學生名單</h1></header>
<form id="form">
<label>姓名:</label><br>
<input type="text" id="name"><br>
<label>年齡:</label><br>
<input type="number" id="age"><br>
<label>性別:</label><br>
<select id="gender">
<option value="male">男性</option>
<option value="female">女性</option>
<option value="none">無</option>
</select><br>
</form>
<button onclick="add()">新增學生</button><br>
<h2>學生列表</h2>
<table id="list"></table>
<script>
function person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
var people = [];
function add() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var gender = document.getElementById("gender").value;
people.push(new person(name, age, gender));
print();
document.getElementById("form").reset();
}
function print() {
var str = "";
for (i = 0; i < people.length; i++) {
str += "<tr><td>姓名: " + people[i].name + " 年齡: " + people[i].age + " 性別: " + people[i].gender + "</td></th>"
}
document.getElementById("list").innerHTML = str;
}
</script>
</body>
</html>

複製代碼