소스코드.txt개똥도 약에 쓸라면 없다고...
보통 아코디언들 소스보면 대부분이 div 나 ul li 로 구성되어져있고,
테이블 아코디언은 좀처럼 찾기가 힘들더라...
그래서 이번에 찾다찾다 직접 만들게 되었다.
작동 방식은 클래스 변경을 통한 보이고 숨기는 방식이고,
작동 룰은 한번클릭하면 바로 아래에 해당되는 tr 이 출력되고
다시 좀전에 클릭한 영역을 다시 클릭할 경우 바로 아래의 tr 이 닫혀지는 룰이다.
다른 영역을 클릭하면 기존에 펼쳐져있던 tr 이 숨겨지면서 바로 아래의 tr 이 보여지게 된다.
코드는 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
table {width:500px;}
.hide {display:none;}
.show {display:table-row;}
.item td {cursor:pointer;}
</style>
</head>
<body>
<table cellspacing="0" border="1" class="recruit">
<caption>진행중인 채용</caption>
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="25%">
</colgroup>
<thead>
<tr class="">
<th scope="col">가나다</th>
<th scope="col">가나다</th>
<th scope="col">가나다</th>
<th scope="col">가나다</th>
</tr>
</thead>
<tbody>
<tr class="item">
<td>아야어</td>
<td>아야어</td>
<td>아야어</td>
<td>아야어</td>
</tr>
<tr class="hide">
<td colspan="4">
1. 모집부분 <br>
[경력] 제휴사업기획 인원 모집 <br> <br>
2. 담당업무 <br>
1) 시장 분석 및 전략 수립 <br>
2) 사업적 지표(데이터)관리 및 분석 <br>
3) 사업 일정 관리 및 내,외부 커뮤니케이션/관리 <br><br>
3. 자격요건 <br>
- 게임 및 게임사업에 대한 비전과 열정 보유 <br>
- 원만한 대인관계 및 커뮤니케이션 능력 보유 <br>
- 전략적인 문제 해결능력 및 데이터 분석 능력 보유 <br>
- 사업/마케팅/기획 업무 능력 보유 <br>
- 책임감이 강하며, 꼼꼼하고 정확한 성격의 소유자
</td>
</tr>
<tr class="item">
<td>아야어</td>
<td>아야어</td>
<td>아야어</td>
<td>아야어</td>
</tr>
<tr class="hide">
<td colspan="4">
1. 모집부분 <br>
[경력] 제휴사업기획 인원 모집 <br> <br>
2. 담당업무 <br>
1) 시장 분석 및 전략 수립 <br>
2) 사업적 지표(데이터)관리 및 분석 <br>
3) 사업 일정 관리 및 내,외부 커뮤니케이션/관리 <br><br>
3. 자격요건 <br>
- 게임 및 게임사업에 대한 비전과 열정 보유 <br>
- 원만한 대인관계 및 커뮤니케이션 능력 보유 <br>
- 전략적인 문제 해결능력 및 데이터 분석 능력 보유 <br>
- 사업/마케팅/기획 업무 능력 보유 <br>
- 책임감이 강하며, 꼼꼼하고 정확한 성격의 소유자
</td>
</tr>
<tr class="item">
<td>아야어</td>
<td>아야어</td>
<td>아야어</td>
<td>아야어</td>
</tr>
<tr class="hide">
<td colspan="4">
1. 모집부분 <br>
[경력] 제휴사업기획 인원 모집 <br> <br>
2. 담당업무 <br>
1) 시장 분석 및 전략 수립 <br>
2) 사업적 지표(데이터)관리 및 분석 <br>
3) 사업 일정 관리 및 내,외부 커뮤니케이션/관리 <br><br>
3. 자격요건 <br>
- 게임 및 게임사업에 대한 비전과 열정 보유 <br>
- 원만한 대인관계 및 커뮤니케이션 능력 보유 <br>
- 전략적인 문제 해결능력 및 데이터 분석 능력 보유 <br>
- 사업/마케팅/기획 업무 능력 보유 <br>
- 책임감이 강하며, 꼼꼼하고 정확한 성격의 소유자
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
var article = (".recruit .show");
$(".recruit .item td").click(function() {
var myArticle =$(this).parents().next("tr");
if($(myArticle).hasClass('hide')) {
$(article).removeClass('show').addClass('hide');
$(myArticle).removeClass('hide').addClass('show');
}
else {
$(myArticle).addClass('hide').removeClass('show');
}
});
});
</script>
</body>
</html>
'차근차근 > JQuery Ajax Jstl' 카테고리의 다른 글
| 404에러..원인찾는중 (0) | 2022.12.02 |
|---|---|
| json 데이터 받아서 탭에보여주기 (0) | 2017.07.06 |
| [jQuery] jQuery API (6/7) - Ajax (0) | 2015.01.19 |
| ajax form 정리 (0) | 2015.01.19 |
| Ajax 오류 메시지 (0) | 2015.01.19 |