HTML - 회원관리
css는 세개 메뉴 동일하다. css
* {
font-family: 'Jua', sans-serif;
font-family: 'Sunflower', sans-serif;
}
* {margin:0px; padding:0px;}
body {width: 960px; margin:0px auto; background-color: white;}
#page {background-color: #1E4174; height: 1500px;}
#top h1 {text-align: center; padding-top: 50px; color:#DDA94B ;}
#bottom h5 {text-align: center; padding-top: 50px; color: white; }
table {margin:0px auto; color: white; margin-top: 50px; border-collapse: collapse;}
td, th{border: 2px solid #DDA94B; padding: 10px;}
#buttons{width:600px ; margin:0px auto; text-align:center; padding:10px;}
.button,button {
width:80px; padding:5px;
background: #DDA94B;
color: white;
border: none;
border-radius: 10px;
}
input[type="text"], input[type="password"] {padding:5px ; border: 1px solid black}
a{text-decoration: none; color:white ; font-size:20px}
a:hover{color: #DDA94B;}
#menu {border: 2px solid #DDA94B; padding:10px; margin-top:10px;}
#list {margin:0px auto;color: white;}
.row:hover {background-color: bisque ; color: black;}
</head>
<body>
<div id="page">
<div id="top">
<h1>회원관리</h1>
</div>
<div id ="menu" >
<center>
<span><a href="ex01.html"> 상품관리 </a></span>
<span><a href="ex02.html">회원관리</a></span>
<span><a href="ex03.html">주소관리</a></span>
</center>
</div>
<div id ="center">
<form name="frm">
<table>
<tr>
<th width=100>아이디</th>
<td width=500><input type="text" name="id"></td>
</tr>
<tr>
<th width=100>비밀번호</th>
<td width=500><input type="password" name="pass"></td>
</tr>
<tr>
<th width=100>비밀번호확인</th>
<td width=500><input type="password" name="pass1"></td>
</tr>
<tr>
<th width=100>성명</th>
<td width=500><input type="text" name="name" maxlenth="20"></td>
</tr>
<tr>
<th width=100>성별</th>
<td width=500>
<input type="radio" name="gender" value="남"> 남
<input type="radio" name="gender" value="여"checked> 여
</td>
</tr>
<tr>
<th width=100>취미</th>
<td width=500>
<input type="checkbox" name="hobby1" value ="여행"> 여행
<input type="checkbox" name="hobby2" value ="독서"checked> 독서
<input type="checkbox" name="hobby3" value ="게임"checked> 게임
<input type="checkbox" name="hobby4" value="운동"> 운동
</td>
</tr>
<tr>
<th width=100>직업</th>
<td width=500>
<select name ="job" style ="height: 25px;">
<option selected>프로그래머</option>
<option>의사</option>
<option>변호사</option>
<option>간호사</option>
<option>강아지</option>
</select>
</td>
</tr>
</table>
<div id="buttons">
<input type = "submit" class = "button" value="등록">
<input type = "reset" class = "button" value="취소">
</div>
</form>
<table id="list"></table>
</div>
<div id="bottom">
<h5>Copyright 2022. 강깸 All Rights Reserved.</h5>
</div>
</div>
</body>
<script>
$(frm).on("submit", function(e){
e.preventDefault();
let id =$(frm.id).val();
let pass =$(frm.pass).val();
let pass1=$(frm.pass1).val();
let name=$(frm.name).val();
let gender=$("input[name=gender]:checked").val();
let hobby1=$("input[name=hobby1]:checked").val();
let hobby2=$("input[name=hobby2]:checked").val();
let hobby3=$("input[name=hobby3]:checked").val();
let hobby4=$("input[name=hobby4]:checked").val();
let job =$(frm.job).val();
if(id==""){
alert("아이디를 입력하세요!");
$(frm.id).focus();
}else if(id.length<5) {
alert("아이디는 5자리이상 입력하세요!")
$(frm.id).focus();
}else if(pass==""){
alert("비밀번호를 입력하세요!");
$(frm.pass).focus();
}else if(pass1==""){
alert("비밀번호확인을 입력하세요!");
$(frm.pass1).focus();
}else if(pass!=pass1){
alert("비밀번호가 일치하지 않습니다!");
$(frm.pass1).focus();
}else if(name==""){
alert("성명을 입력하세요!");
$(frm.name).focus();
}else {
hobby1=hobby1==null? "":hobby1;
hobby2=hobby2==null? "":hobby2;
hobby3=hobby3==null? "":hobby3;
hobby4=hobby4==null? "":hobby4;
let str ="<tr class= 'row'>";
str+="<td class='id'>" +id +"</td>";
str+="<td class='name'>" +name +"</td>";
str+="<td>" +gender +"</td>";
str+="<td width=50>" +hobby1+"</td>";
str+="<td width=50>" +hobby2+"</td>";
str+="<td width=50>" +hobby3+"</td>";
str+="<td width=50>" +hobby4+"</td>";
str+="<td class='job'>" +job +"</td>";
str+="<td><button>삭제</button></td>";
str+="</tr>";
$("#list").append(str);
$("input[type=reset]").click();
}
});
//삭제버튼을 클릭
$("#list").on("click",".row button", function(){
let row =$(this).parent().parent();
let name =row.find(".name").html();
if(!confirm(name+"을(를) 삭제하실래요?")) return;
row.remove();
});
</script>
</html>
3개의 메뉴 중에서 가장 복잡하다. 체크박스와 select 가 들어가서 앞글과는 조금 다를것이다.
비밀번호같은경우는 일치하지않으면 일치하지않아서 입력을 다시하게한다.
회원관리도 마찬가지로 삭제를 누르게되면 삭제될것이다.
댓글남기기