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;}
<html>
<head>
<title>주소관리</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&family=Sunflower:wght@300&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="common.css"/>
<style>
.row:nth-child(2n){color: yellowgreen;}
</style>
</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="name" size=10></td>
</tr>
<tr>
<th width=100>주소</th>
<td width=500><input type="text" name="address"size=50></td>
</tr>
<tr>
<th width=100>전화</th>
<td width=500><input type="text" name="tel" size=20></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. 강깸 Reserve All Right.</h5>
</div>
</div>
</body>
<script>
$(frm).on("submit",function(e){
e.preventDefault();
let name = $(frm.name).val();
let tel = $(frm.tel).val();
let address = $(frm.address).val();
if(name==""){
alert("이름을 입력하세요!");
$(frm.name).focus();
}else if(address==""){
alert("주소를 입력하세요!")
$(frm.address).focus();
}else if(tel==""){
alert("전화번호를 입력하세요!")
$(frm.tel).focus();
}else {
if(!confirm("주소를 등록하실래요?")) return;
let str= "<tr class='row'>";
str+= "<td width =50 class='name'>" +name+ "</td>";
str+= "<td width =250>" +address+ "</td>";
str+= "<td width =150>" +tel+ "</td>";
str+="<td width =100><button>삭제</button></td>";
str+="</tr>";
$("#list").append(str);
$(frm.name).val("");
$(frm.address).val("");
$(frm.tel).val("");
}
});
//삭제버튼을 클릭한 경우
$("#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>
전 게시글과 똑같고 내용 동일하니까 설명 생략 (주소등록게시글과 같음)
댓글남기기