- <!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>
複製代碼 |