안녕하세요! 오늘은 테이블 행 클릭 시 테이블 행에 관한 상세 내용을 확인할 수 있게하는 collapsible table을 display 속성table-row 값을 사용해서 표처럼 표현하여 구현해봅시다. display의 table-row를 사용하면 요소를 테이블의 행(row)처럼 표시할 수 있습니다.
우선 구현 된 모습입니다.
첫번째와 두번째 행 클릭 시 상세내용이 펼쳐져 응시일, 과목, 점수를 나타내는 내부 테이블이 보입니다. 클릭했던 행을 다시 클릭하면 접히는 것을 확인할 수 있습니다. 마치 하나의 행처럼 보이는데 그 안에 또다른 테이블이 들어가져있죠?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<style>
@charset "UTF-8";
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
* {
box-sizing: border-box;
}
.year:after {
content: "년";
}
.age:after {
content: "세";
}
.fold-content h4:after{
content: " - 상세내용";
}
table {
width:60%;
margin: auto;
}
table th {
text-align: left;
border-bottom: 1px solid #ccc;
}
table th, table td {
padding: 0.4em;
}
table.fold-table > tbody > tr.view td {
cursor: pointer;
}
/*아이콘 위치설정*/
table.fold-table > tbody > tr.view td:first-child{
position: relative;
padding-left: 20px;
}
/*아이콘 설정*/
table.fold-table > tbody > tr.view td:first-child:before {
position: absolute;
top: 50%;
left: 5px;
width: 9px;
height: 16px;
margin-top: -8px;
font: 16px fontawesome;
color: #999;
content: "";
}
/*마우스호버*/
table.fold-table > tbody > tr.view:hover {
background: tomato;
}
/*미클릭시 안보이게 처리*/
table.fold-table > tbody > tr.fold {
display: none;
}
.fold-content > table {
/*내부 테이블*/
width: 100%;
border: 2px solid #ccc;
margin-bottom: 10px;
}
.fold{
background:#eee;
}
</style>
</head>
<body>
<table class="fold-table">
<thead>
<tr>
<th>등록연도</th>
<th>이름</th>
<th>지역</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr class="view"><!--보여주기-->
<td class="year">2022</td>
<td>김철수</td>
<td>경기도</td>
<td class="age">20</td>
</tr>
<tr class="fold">
<td colspan="4">
<div class="fold-content">
<h4>김철수</h4>
<table><!--내부테이블-->
<thead>
<tr>
<th>응시일</th>
<th>과목</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<td>2022/03/21</td>
<td>토익</td>
<td>880</td>
</tr>
<tr>
<td>2022/06/22</td>
<td>HSK</td>
<td>270</td>
</tr>
</tbody>
</table><!--내부테이블-->
</div>
</td>
</tr>
<tr class="view">
<td class="year">2021</td>
<td>김영구</td>
<td>강원도</td>
<td class="age">30</td>
</tr>
<tr class="fold">
<td colspan="4">
<div class="fold-content">
<h4>김영구</h4>
<table><!--내부테이블-->
<thead>
<tr>
<th>응시일</th>
<th>과목</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<td>2021/01/24</td>
<td>토익</td>
<td>830</td>
</tr>
<tr>
<td>2022/04/25</td>
<td>OPIC</td>
<td>AH</td>
</tr>
</tbody>
</table><!--내부테이블-->
</div>
</td>
</tr>
</tbody>
</table><!--외부테이블-->
<script>
var rows = document.getElementsByClassName("view");// view 라는 classname의 모든 element들 가져오기.
var i;
for (i = 0; i < rows.length; i++) { //elements를 for문으로 돌려서 각행에 클릭 리스너 등록.
rows[i].addEventListener("click", function() {
var content = this.nextElementSibling;
//display:table-row는 요소를 표 내의 행처럼 보이게한다.
if (content.style.display === "table-row") {
content.style.display = "none";
} else {
content.style.display = "table-row";
}
});//click event
}//for문
</script>
</body>
</html>'JavaScript' 카테고리의 다른 글
| [ JavaScript ] Chart.js 라이브러리 사용해서 막대 그래프 그리기 (0) | 2022.12.17 |
|---|---|
| [ JavaScript ] moment.js 라이브러리 사용해보기 (0) | 2022.12.11 |
| [ JavaScript ] Lodash 라이브러리 사용해보기. (0) | 2022.12.02 |
| [ JavaScript ] 이메일 인증 화면 예제 (0) | 2022.11.30 |
| [Javascript] 템플릿 리터럴 (Template Literals) (0) | 2022.11.19 |
