Everything has an expiration date
[JSP & Servlet] 20231207 [프로그램소스] - Table, TableOk, TableOK_1(해설) 본문
[JSP & Servlet]/Program source (JSP & Servlet)
[JSP & Servlet] 20231207 [프로그램소스] - Table, TableOk, TableOK_1(해설)
Jelly-fish 2023. 12. 7. 17:41
WebApp05
Table.jsp
Table.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table.jsp</title>
</head>
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 05</h1>
<hr>
<p>Table.jsp → TableOk.jsp</p>
</div>
<div>
<form action="TableOk.jsp" method="get">
<table class="table">
<tr>
<th>가로</th>
<td>
<input type="text" name="su1" class="txt">
</td>
</tr>
<tr>
<th>세로</th>
<td>
<input type="text" name="su2" class="txt">
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" class="btn control" style="width: 300px">
결과확인
</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
TableOk.jsp
TableOk.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
// 가로 값. 세로 값 가져와서 테이블을 생성한다.
// (1) 가로값 세로값 가져오기
int wid = Integer.parseInt(request.getParameter("su1"));
int hei = Integer.parseInt(request.getParameter("su2"));
// (2) for 문 돌면서 테이블 만들기 (각각의 td 안에 값 넣기.)
// tr = outer for
// td = inner for
/* su1(가로) : 4
su2(세로) : 2
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr> */
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TableOk.jsp</title>
<style type="text/css">
@font-face {
font-family: 'ImcreSoojin';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.3/ImcreSoojin.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {font-family: 'ImcreSoojin'; color: #8047a1;}
table { background-color: #ffe3ff; text-align: center; padding: 6pt; border: medium; margin: auto; border-radius: 10pt;}
td {padding: 5pt; height: 5pt; background-color: white; }
th {padding: 5pt; height: 5pt; background-color: #e1c2ff; }
tr {padding: 5pt; height: 5pt; background-color: #e1c2ff; }
</style>
</head>
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 05</h1>
<hr>
<p>Table.jsp → TableOk.jsp</p>
</div>
<div>
<table border="2">
<%
int incNum = 1; // 하나씩 td를 추가할 때마다 증가.
%>
<%for(int i = 0; i < hei; i++)
{%>
<tr>
<%for(int j = 0; j < wid; j++)
{%>
<td>
<%= incNum%>
<% incNum++; %>
</td>
<%}%>
</tr>
<%}%>
</table>
</div>
</body>
</html>
TableOK_1.jsp (선생님 해설)
<%@ page contentType="text/html; charset=UTF-8"%>
<%
// 스크립릿 영역
// 이전 페이지(Table.jsp)로부터 전송된 페이지 수신
// → su1, su2
String s1 = request.getParameter("su1");
String s2 = request.getParameter("su2");
int n1 = 0;
int n2 = 0;
// 테이블 안에서 1씩 증가시켜 나갈 변수 선언 및 초기화
int n = 0;
try
{
// 수신된 데이터 형 변환 (문자열 → 정수)
n1 = Integer.parseInt(s1);
n2 = Integer.parseInt(s2);
}
catch(Exception e)
{
System.out.println(e.toString());
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TableOk.jsp</title>
<style type="text/css">
@font-face {
font-family: 'ImcreSoojin';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.3/ImcreSoojin.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {font-family: 'ImcreSoojin'; color: #8047a1;}
table { background-color: #ffe3ff; text-align: center; padding: 6pt; border: medium; margin: auto; border-radius: 10pt;}
td {padding: 5pt; height: 5pt; background-color: white; }
th {padding: 5pt; height: 5pt; background-color: #e1c2ff; }
tr {padding: 5pt; height: 5pt; background-color: #e1c2ff; }
</style>
</head>
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 05</h1>
<hr>
<p>Table.jsp → TableOk.jsp</p>
</div>
<div>
<table border="1">
<!-- outer for : n2 (세로) -->
<%
for (int i = 0; i < n2; i++)
{
%>
<!-- tr은 for j에 들어가면 안 된다. -->
<tr>
<!-- inner for : n1 (가로) -->
<%
for (int j = 0; j < n1; j++)
{
%>
<td style="width: 40px; text-align: right;"><%=++n %></td>
<%--===========================================================--%>
<%-- ++ 처리를 java 영역에서 해야 한다고 생각했는데 (연산이므로) --%>
<%-- 표현식 영역 <%= %> 안에서도 가능하다~!! --%>
<%--===========================================================--%>
<%
}
%>
</tr>
<%
}
%>
</table>
</div>
</body>
</html>'[JSP & Servlet] > Program source (JSP & Servlet)' 카테고리의 다른 글
'[JSP & Servlet]/Program source (JSP & Servlet)' Related Articles
more
