[JSTL] td 감싸기, JSP와 JSTL을 활용한 동적 데이터를 테이블로 효율적으로 표현하기

 

 

JSP와 JSTL을 이용하여 동적 데이터를 테이블 형태로 표현하는 두 가지 접근 방식을 소개하고자 합니다. 

 

문제 상황

웹 애플리케이션에서 사용자의 요청에 따라 데이터베이스에서 조회한 결과를 테이블 형태로 동적으로 표시해야 한다고 가정해 봅시다. 데이터 항목은 'AAA', 'BBB' 등의 카테고리로 분류되며, 각 카테고리에는 다수의 데이터 항목('aaa', 'bbb', 'ccc' 등)이 있을 수 있습니다.

 

표현할 테이블

- item에 들어있는 데이터의 수가 유동적

AAA	aaa
	bbb
	ccc
BBB	aaa

 

 

첫 번째 시도 (실패)

첫 번째 시도에서는 EL과 JSTL을 사용하여 테이블을 구성했지만, 동적 데이터를 모두 포함하는 데 문제가 발생했습니다.

 

EL , JSTL 사용

th가 1번만 찍혀서 td를 다 감싸지못함

<c:if test="${data == 'OK'}">
    <tr>
        <% boolean once = true; %>
        <c:choose>
            <c:when test="${data1 != 'NULL'}">
                <c:forEach var="item" items="${DATA_d1}">
                    <tr>
                        <% if (once) { %>
                        <th scope="rowgroup" style="background-color: #3366ff; color: #fff">AAA</th>
                        <% once = false; } %>
                        <td><c:out value="${item.aaa}"/></td>
                        <td><c:out value="${item.bbb}"/></td>
                    </tr>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <tr>
                    <th style="background-color: #3366ff; color: #fff">AAA</th>
                    <td>-</td>
                    <td>-</td>
                </tr>
            </c:otherwise>
        </c:choose>
    </tr>
</c:if>

 

이 코드에서는 <th> 태그가 한 번만 렌더링되어, 여러 데이터 항목을 포함해야 하는 경우에 문제가 발생합니다. 

<th> 태그는 테이블의 헤더를 나타내며, 여기서는 'AAA' 카테고리를 지정합니다.

그러나, 이 헤더는 첫 번째 행에만 적용되고, 나머지 행들은 헤더 없이 데이터만 표시되는 문제가 있습니다.

 

두 번째 시도: 문제 해결

문제를 해결하기 위해, 테이블의 구조를 재구성하는 방법을 적용했습니다.

<tr>을 전체에 1번, <td>를 감싸는 <tr>을 1번해서 총 2번 사용해야함

<c:if test="${data == 'OK'}">
    <tr>
        <c:choose>
            <c:when test="${data1 != 'NULL'}">
                <th rowspan="${fn:length(DATA_d1) + 1}" scope="rowgroup" style="background-color: #3366ff; color: #fff">AAA</th>
                <c:forEach var="item" items="${DATA_d1}" varStatus="status">
                    <% if (status.index > 0) { %><tr><% } %>
                        <td><c:out value="${item.aaa}"/></td>
                        <td><c:out value="${item.bbb}"/></td>
                    <% if (status.index > 0) { %></tr><% } %>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <tr>
                    <th style="background-color: #3366ff; color: #fff">AAA</th>
                    <td>-</td>
                    <td>-</td>
                </tr>
            </c:otherwise>
        </c:choose>
    </tr>
</c:if>

 

이 코드에서는 rowspan 속성을 사용하여 'AAA' 헤더가 여러 행에 걸쳐 적용되도록 했습니다.

이 방법은 동적으로 변하는 데이터의 양에 관계없이 모든 데이터 항목이 올바르게 'AAA' 카테고리 헤더 아래에 표시되도록 합니다.

또한, <tr> 태그를 적절하게 배치하여 각 데이터 항목이 자신의 행에 위치하도록 했습니다.