|
<!DOCTYPE html> |
|
<html lang="ko"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>ํ์๊ด๋ฆฌ ์์คํ
</title> |
|
<style> |
|
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
} |
|
|
|
body { |
|
background: #f5f5f5; |
|
padding: 20px; |
|
} |
|
|
|
.container { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
background: white; |
|
padding: 30px; |
|
border-radius: 10px; |
|
box-shadow: 0 0 10px rgba(0,0,0,0.1); |
|
} |
|
|
|
h1 { |
|
color: #333; |
|
margin-bottom: 30px; |
|
text-align: center; |
|
} |
|
|
|
.form-group { |
|
margin-bottom: 15px; |
|
} |
|
|
|
label { |
|
display: block; |
|
margin-bottom: 5px; |
|
color: #555; |
|
} |
|
|
|
input { |
|
width: 100%; |
|
padding: 8px; |
|
border: 1px solid #ddd; |
|
border-radius: 4px; |
|
font-size: 14px; |
|
} |
|
|
|
button { |
|
background: #4CAF50; |
|
color: white; |
|
border: none; |
|
padding: 10px 20px; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
font-size: 14px; |
|
margin-right: 10px; |
|
} |
|
|
|
button:hover { |
|
background: #45a049; |
|
} |
|
|
|
.search-section { |
|
margin: 20px 0; |
|
padding: 20px; |
|
background: #f9f9f9; |
|
border-radius: 4px; |
|
} |
|
|
|
.member-list { |
|
margin-top: 20px; |
|
} |
|
|
|
table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
margin-top: 20px; |
|
} |
|
|
|
th, td { |
|
padding: 12px; |
|
text-align: left; |
|
border-bottom: 1px solid #ddd; |
|
} |
|
|
|
th { |
|
background: #f5f5f5; |
|
color: #333; |
|
} |
|
|
|
tr:hover { |
|
background: #f9f9f9; |
|
} |
|
|
|
.error { |
|
color: red; |
|
font-size: 14px; |
|
margin-top: 5px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<h1>ํ์๊ด๋ฆฌ ์์คํ
</h1> |
|
|
|
<form id="memberForm"> |
|
<div class="form-group"> |
|
<label for="memberId">ํ์๋ฒํธ</label> |
|
<input type="text" id="memberId" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="name">์ด๋ฆ</label> |
|
<input type="text" id="name" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="age">๋์ด</label> |
|
<input type="number" id="age" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="phone">ํธ๋ํฐ๋ฒํธ</label> |
|
<input type="tel" id="phone" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="email">์ด๋ฉ์ผ์ฃผ์</label> |
|
<input type="email" id="email" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="address">์ฃผ์</label> |
|
<input type="text" id="address" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="note">๋น๊ณ </label> |
|
<input type="text" id="note"> |
|
</div> |
|
<button type="submit">๋ฑ๋ก</button> |
|
</form> |
|
|
|
<div class="search-section"> |
|
<div class="form-group"> |
|
<label for="searchName">์ด๋ฆ์ผ๋ก ๊ฒ์</label> |
|
<input type="text" id="searchName"> |
|
</div> |
|
<button onclick="searchMembers()">๊ฒ์</button> |
|
</div> |
|
|
|
<div class="member-list"> |
|
<table> |
|
<thead> |
|
<tr> |
|
<th>ํ์๋ฒํธ</th> |
|
<th>์ด๋ฆ</th> |
|
<th>๋์ด</th> |
|
<th>ํธ๋ํฐ๋ฒํธ</th> |
|
<th>์ด๋ฉ์ผ์ฃผ์</th> |
|
<th>์ฃผ์</th> |
|
<th>๋น๊ณ </th> |
|
</tr> |
|
</thead> |
|
<tbody id="memberTableBody"> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
let members = []; |
|
|
|
document.getElementById('memberForm').addEventListener('submit', function(e) { |
|
e.preventDefault(); |
|
|
|
const member = { |
|
memberId: document.getElementById('memberId').value, |
|
name: document.getElementById('name').value, |
|
age: document.getElementById('age').value, |
|
phone: document.getElementById('phone').value, |
|
email: document.getElementById('email').value, |
|
address: document.getElementById('address').value, |
|
note: document.getElementById('note').value |
|
}; |
|
|
|
members.push(member); |
|
updateTable(); |
|
this.reset(); |
|
}); |
|
|
|
function searchMembers() { |
|
const searchName = document.getElementById('searchName').value.toLowerCase(); |
|
const filteredMembers = members.filter(member => |
|
member.name.toLowerCase().includes(searchName) |
|
); |
|
updateTable(filteredMembers); |
|
} |
|
|
|
function updateTable(data = members) { |
|
const tableBody = document.getElementById('memberTableBody'); |
|
tableBody.innerHTML = ''; |
|
|
|
data.forEach(member => { |
|
const row = document.createElement('tr'); |
|
row.innerHTML = ` |
|
<td>${member.memberId}</td> |
|
<td>${member.name}</td> |
|
<td>${member.age}</td> |
|
<td>${member.phone}</td> |
|
<td>${member.email}</td> |
|
<td>${member.address}</td> |
|
<td>${member.note}</td> |
|
`; |
|
tableBody.appendChild(row); |
|
}); |
|
} |
|
</script> |
|
</body> |
|
</html> |
