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="code" value = "P001" readonly></td>
</tr>
<tr>
<th width =100>상품이름</th>
<td width =500><input type ="text" name="name" size="50 "></td>
</tr>
<tr>
<th width =100>상품가격</th>
<td width =500><input type ="text" name="price" size="10">원</td>
</tr>
<tr>
<th width =100>상품판매자</th>
<td width =500><input type ="text" name="company" size="10"></td>
</tr>
</table>
<div id ="buttons">
<input type = "submit" value="등록" class="button">
<input type = "reset" value="취소" class="button">
</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(); //submit 를방지한다
//유효성체크
let code = $(frm.code).val();
let name = $(frm.name).val();
let price=$(frm.price).val();
let company=$(frm.company).val();
if(name==""){
alert("이름을 입력하세요!")
$(frm.name).focus();
}else if(price==""){
alert("가격을 입력하세요!")
$(frm.price).focus();
}else if(company ==""){
alert("회사명을 입력하세요!")
$(frm.company).focus();
}else {
if(!confirm("정말로 등록하실래요?")) return;
let str= "<tr class='row'>";
str+= "<td width =50 class='code'>" +code+ "</td>";
str+= "<td width =200 class='name'>" +name+ "</td>";
str+= "<td width =50>" +price+ "</td>";
str+= "<td width =150>" +company+ "</td>";
str+="<td width =100><button>삭제</button></td>";
str+="</tr>";
$("#list").append(str);
$(frm.name).val("");
$(frm.price ).val("");
$(frm.company).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>
위 사진과 같이 값을 입력하지 않으면 입력하라는 메세지와 커서를 가격쪽으로 놔준다.
상품을 등록하면 보여지게 했다. 부가적으로 SYTLE 을 줘서 .row:nth-child(2n){color: yellowgreen;} 짝수번째 값에 yellowgreen 색을 주게될것이다.
삭제를 누르게되면 메세지를 한번 띄어주고 확인을 누르게되면
삭제가 될것이다.
그리고 메뉴를 주게되어서 상품관리, 회원관리, 주소관리를 연결해줬다. 누르게되면 각페이지로 들어갈것이다. 이후에 적을 회원관리, 주소관리도 비슷한내용이다.
댓글남기기