테이블 행 펼치고 접기

Q. 테이블의 제목(행)들 중 원하는 제목(행)을 클릭하면, 제목 하단으로 해당 제목의 내용이 펼쳐진다.

※펼쳐지기 전 ※펼쳐진 후

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
body {font-size:12px; font-family:돋음}
td {border-bottom:1px solid #dedede; padding:7px 2px 5px 2px; vertical-align:middle;}
.title {cursor:pointer;}
.conts {line-height:1.8; padding:10px;}
img {margin-top:-2px;}
</style>

$(function () {

$('#contents tr').hide(); -- class가 contents인 tr을 모두 감춘다. 펼쳐질 내용을 감춰두기위한 작업

$('#contents').find('.title').parent().show();
-- class가 title인 td가 속한 tr을 보이기위한 작업(parent는 상위를 의미한다.)

$('#contents .title').parent().click(function(){ -- class가 title인 td가 속한 tr을 클릭하면 함수 실행

$('#contents tr').hide();

$('#contents').find('.title').parent().show();

$('#contents').find('.title').css('background-color', '#fff'); -- class가 title인 td가 속한 tr에 배경색을 흰색으로 지정

var tr = $('#contents tr');

var rindex = $(this).parent().children().index(this); -- 클릭한 tr의 인덱스를 찾아 변수에 저장

$(this).children().css('background-color', '#f7f7f7'); -- 클릭한 tr(제목)에만 배경색을 회색으로 지정

for(var i = rindex; i < rindex + 2; i++){ -- 클릭한 tr의 다음(1이면 2) tr 인덱스를 찾기위한 작업

$(tr[i]).show(); -- 찾아낸 인덱스 tr을 보이기위한 작업

}

});

</script>

<title>Untitled Document</title>
</head>

<tr>

테이블 행 펼치고 접기_1 클릭

</td>

</tr>

<tr>

첫번째 행의 내용입니다.

</td>

</tr>

<tr>

테이블 행 펼치고 접기_2 클릭

</td>

</tr>

<tr>

두번째 행의 내용입니다.

</td>

</tr>

</table>
</BODY>
</HTML>

저작자표시 비영리 동일조건

'JavaScript & jQuery' 카테고리의 다른 글

구글 애널리틱스 새 계정 추가하는 법 (0)	2012.01.10
jQuery 알파벳 순서대로 정렬하기 (1)	2011.09.23
jquery 오늘하루 보이지 않음 (0)	2011.09.09
slideDown , slideUp , fadeIn, fadeOut (0)	2011.09.08
클라이언트 시간구하기(자바스크립트) (0)	2011.09.01