CI 묻고 답하기

제목 jquery를 이용한 자동 table rowspan 적용 스크립트입니다.
글쓴이 kirrie 작성시각 2009/06/27 14:22:05
댓글 : 5 추천 : 0 스크랩 : 0 조회수 : 62240   RSS
/**
* jquery를 이용한 자동 table rowspanning
*
* @author 이주헌
* @param object jquery $함수를 이용해서 리턴된 테이블 오브젝트
* @param int rowspan을 적용할 td element의 인덱스
* @return void
*/
function tableRowSpanning(Table, spanning_row_index)
{
var RowspanTd = false;
var RowspanText = false;
var RowspanCount = 0;
var Rows = $('tbody tr', Table);

$.each(Rows, function() {
var This = $('td', this)[spanning_row_index];
var text = $(This).text();

if(RowspanTd == false)
{
RowspanTd = This;
RowspanText = text;
RowspanCount = 1;
}
else if(RowspanText != text)
{
$(RowspanTd)
.attr('rowSpan', RowspanCount);

RowspanTd = This;
RowspanText = text;
RowspanCount = 1;
}
else
{
$(This)
.remove();
RowspanCount++;
}
});

// 반복 종료 후 마지막 rowspan 적용
$(RowspanTd)
.attr('rowSpan', RowspanCount);
}

--->
php로 테이블의 rowspan을 일일이 계산하는건 정말 큰 일이죠. 그냥 그 일을 웹브라우져에 맡겨버리면 편하겠지요?
묻지도 따지지도 않고 rowspan을 계산해서 적용해줍니다.

사용법은 아래와 같습니다.
tableRowSpanning($('table#timetable'), 0);

적당한 위치에 넣어주면 (적당한 위치라 함은 onload 이벤트가 발생한 시점, 즉 html이 모두 파싱되어 로딩된 뒤를 의미합니다.),
자동으로 모든 row가운데 첫번째 td의 내부 text값을 가지고 비교하여 rowspan을 걸어줍니다.
여러개도 사용이 가능한데 이때에는 반드시 인덱스가 큰 값부터 먼저 적용해야 합니다. (rowspan을 걸면서 spanning된 td를 삭제하기 때문에 인덱스가 달라집니다.)

tableRowSpanning($('table#timetable'), 1);
tableRowSpanning($('table#timetable'), 0);

이렇게 하면 두번째 인덱스 먼저 rowspan을 걸고 그 다음에 첫번째 인덱스의 rowspan을 처리합니다.

집 근처에 cgv 영화관이 있어서 가끔 영화를 보는데, 영화 시간표를 cgv 홈페이지에서 보려고 하면 플래쉬 떡칠에 속도도 무쟈게 느려서
따로 시간표 xml을 훔쳐(?) 온 다음에 파싱하는 작업을 하다가 만들었습니다.

어제 모임때 웅파형님께서 '이미 필요한건 다 구글에 있다!'는 말씀을 듣고 찾아봤더니 정말 jquery를 이용한 동일한 함수를 누가 먼저 만들어 놨더군요.
그런데 뭐가 문제인지 제대로 동작하지 않아서 그냥 새로 만들었습니다.

라이센스는 Creative Commons License
이주헌에 의해 창작된 tableRowSpanning 은(는) 크리에이티브 커먼즈 저작자표시-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용할 수 있습니다.
day.pe.kr의 저작물에 기초입니다.

# cgv 영화 시간표 주소는 http://mixnut.co.kr/apps/cgv 입니다. 전국 cgv 다 지원하고 날짜별로도 볼 수 있으니까 필요하신분들은 북마크 해놓고 쓰세요. ^^
 다음글 [잡담] 컨트롤러의 분리. (2)
 이전글 드디어 관리자 페이지'만' 끝. (6)
목록

댓글

포럼운영자 / 2009/06/28 08:26:22 / 추천 0
죽이는군 !! 꼭 필요했던거야 . 자네도 영화 좋아하나보구먼 .
변종원(웅파) / 2009/06/27 20:53:08 / 추천 0
이거 좋네.
써먹어야지. ^^
이멀렉 / 2009/06/29 10:35:32 / 추천 0
움찔! 쌔끈한 기능인가요?!
kirrie / 2009/06/29 22:13:04 / 추천 0
쌔끈하다기보다는 골치아픈 작업을 자바스크립트가 대신 해준다는.. 정도의 의미 ㅎㅎ
이멀렉 / 2009/06/30 15:39:11 / 추천 0
카...카피엔 페이스트 신공으로 잘 쓸겠습니다.