[JSP] 영화관 자리 예매 기능 (feat. 엄청난 for문)
by mini_min
👩💻 영화관 자리 예매 기능 만들기 (1)
- 줄 맞추는게 생각보다 힘들었다. for 문으로 돌리되, for 문의 순서가 아닌 임의의 변수 하나(num) 를 잡아서 자리값으로 띄어쓰기를 구현했다.
- 문제의 html 코드는 아래에... 지금 생각해보니, 최상단에 써주신 변수를 사용할껄 싶다. 추가로 내가 사용한 변수도 위에 추가하면 코드가 더 깔끔해질 것 같다.
</head>
<body>
<div class="reserve-container">
<div class="screen">
스크린
</div>
<form name="movie" action="reserveEx_ok.jsp" method="post">
<table class="table">
<tr>
<% int num=0; %>
<% for(int i=1; i<=15; i++) {%>
<% if(num%5==0){ %>
<td></td>
<%num=0; %>
<%} %>
<td><%=i %></td>
<% ++num; %>
<%} %>
</tr>
</table>
<table class="table">
<%char alp = 'A';%>
<%int num2 = 1;%>
<%int sitnum =1; %>
<%for(int j=0; j<10; j++) {%>
<tr> <td id="row<%=alp%>"><%=alp %></td>
<%for(int i=1; i<18; i++) {%>
<%if(num2%6==0) {%>
<td style="background: #e4e4e4"></td>
<%num2 = 1; %>
<%continue;} %>
<td> <input id="<%=alp%><%=sitnum %>" value="<%=alp%><%=sitnum %>" type="checkbox" name="sit"></td>
<% ++num2; %>
<% ++sitnum; %>
<%} %>
<%num2 =1; %>
<%sitnum =1; %>
</tr>
<%alp++; %>
<%} %>
</table>
<table>
<tr>
<td> <button type="button" class="btn" onclick="reservation();">좌석예약</button> </td>
</tr>
</table>
</form>
</div>
</body>
👩💻 영화관 자리 예매 기능 만들기 (2)
- const count = document.getElementsByName("sit");
체크 박스의 값을 받아서 const chk = count.length; 와 f.sit[i].checked 로 몇 개의 좌석이 선택되었는지 판단한다.
나는 특정 자리에 disabled 속성을 하나 하나 넣었는데 .. JSP 코드로 작성하는 부분을 복습해서 이번 주 주말에 적용해보려고 한다.
<script type="text/javascript">
function reservation() {
const f = document.movie;
const count = document.getElementsByName("sit");
const chk = count.length;
let sum = 0;
for(let i=0; i<chk; i++){
if(f.sit[i].checked == true){
sum += 1;
}
}
if(sum > 4){
alert("좌석은 최대 4개까지만 선택 가능합니다.")
return;
}
if( ! sum){
alert("좌석은 1개 이상 선택해야합니다.")
return;
}
f.submit();
}
// 이 부분 다시 짤 것
window.addEventListener("load", function(){
const B3 = document.querySelector("#B3");
const B4 = document.querySelector("#B4");
const E6 = document.querySelector("#E6");
const E7 = document.querySelector("#E7");
const H2 = document.querySelector("#H2");
const H3 = document.querySelector("#H3");
B3.disabled = true;
B4.disabled = true;
E6.disabled = true;
E7.disabled = true;
H2.disabled = true;
H3.disabled = true;
});
</script>
'JSP' 카테고리의 다른 글
| [JSP] response 내장 객체 (redirect 메소드) / pageContext 내장 객체 (0) | 2022.09.29 |
|---|---|
| [JSP] request 내장 객체 (0) | 2022.09.29 |
| [JSP] hidden / disabled 차이 (파라미터가 서버로 가느냐) (0) | 2022.09.28 |
| [JSP] 📓 파라미터 전송 예제 (폼 예제) (0) | 2022.09.28 |
| [JSP] getParameter / getParameterValues / getParameterMap /getParameterNames (0) | 2022.09.28 |
블로그의 정보
개발자 미니민의 개발로그
mini_min