[JavaScript] 테이블 expand 구현하기

이번에는 테이블을 클릭하면 테이블이 확장되며 child row를 보여줄 수 있도록하는 기능을 개발하고자 한다.

먼저, table expand를 위한 expand용 화살표를 만들기 위해 테이블의 제일 앞에 화살표를 둘 수 있도록 html을 아래와 같이 구성하였다.

<table class="table table-hover text-center dataTables-example" id="example" class="display" cellspacing="0" width="100%">
	<thead>
    	<tr>
        	<th></th>
            <th>문의유형</th>
            <th>제목</th>
            <th>등록일</th>
            <th>진행상태</th>
            </tr>
	</thead>
    <tbody>
		<tr>
        	<td class="contact-control"></td>
            <td>회원정보</td>
            <td>회원 정보는 어떻게 수정하나요?</td>
            <td>2022-07-23</td>
            <td>답변대기</td>
		</tr>
        <tr>
        	<td class="contact-control"></td>
            <td>회원정보</td>
            <td>회원 정보는 어떻게 수정하나요?</td>
            <td>2022-07-23</td>
            <td>답변완료</td>
		</tr>
        <tr>
        	<td class="contact-control"></td>
            <td>회원정보</td>
            <td>회원 정보는 어떻게 수정하나요?</td>
            <td>2022-07-23</td>
            <td>답변완료</td>
		</tr>
        <tr>
        	<td class="contact-control"></td>
            <td>회원정보</td>
            <td>회원 정보는 어떻게 수정하나요?</td>
            <td>2022-07-23</td>
            <td>답변완료</td>
		</tr>
        <tr>
        	<td class="contact-control"></td>
            <td>회원정보</td>
            <td>회원 정보는 어떻게 수정하나요?</td>
            <td>2022-07-23</td>
            <td>답변완료</td>
		</tr>
	</tbody>
    <tfoot>
	</tfoot>
</table>

여기서 빈 td에 contact-control이라는 클래스를 부여한 이유는 expand를 구현하기 위한 key로 사용하기 위해 부여하였다.

부여한 클래스를 통해 expand를 작동하는 원리를 가진 자바스크립트는 아래와 같다.

// Add event listener for opening and closing details
        $('#example tbody').on('click', 'td.contact-control', function(){
            var tr = $(this).closest('tr');
            var row = table.row( tr );

            if(row.child.isShown()){
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            } else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });

해당 스크립트를 통해 child row를 펼칠 수 있게하였고, 이때 사용하는 child row의 format은 아래와 같이 따로 선언해주었다.

<script>
    function format ( d ) {
        return '<div class="row ml-1">'+
            '<div class="col-lg-12 mt-3">'+
            '<p class="question float-left"><span class="contact-icon mr-1">Q.</span>회원정보는 어떻게 수정하나요? </p>'+
            '</div>'+
            '<div class="col-lg-12 mb-2">'+
            '<p class="anwser float-left"><span class="contact-icon mr-1">A.</span>왼쪽 사이드메뉴의 프로필에서 원하는 정보를 찾아 변경하시면 됩니다. </p>'+
            '</div>';
    }
</script>

여기까지 단계에 도달했다면 이제 왼쪽의 화살표를 만들어주고 마우스를 가져다놓을때 커서를 포인터로 변경해주는 css를 아래와 같이 따로 작성해주었다.

td.contact-control {
  background: url('../images/right.svg') no-repeat center center;
  cursor: pointer;
}
tr.shown td.contact-control {
  background: url('../images/down.svg') no-repeat center center;
}

위와 같은 방법을 통해 화살표 클릭 시, table expand 되고 닫을 수 있는 기능을 개발해보았다.

 

Tip. 제목을 누를 때 expand하고 싶다면 제목에 contact-control 클래스를 전체 중 아무거나 누를 때 가능하게 하고싶다면 모든 td에 contact-control 이라는 클래스를 부여하면 될 것이다.

 

마지막으로 만들어진 결과물 이미지를 첨부하고 이 글을 마치도록 하겠다.

 

화살표 클릭으로 펼쳤을 때