jquery를 이용한 자동 table rowspan 적용 스크립트입니다.
페이지 정보
작성자 서방님 댓글 0건 조회 219회 작성일 13-11-13 14:10본문
/**
* jquery를 이용한 자동 table rowspanning
*
* @author 이주헌 < kirrie@gmail.com>
* @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를 이용한 동일한 함수를 누가 먼저 만들어 놨더군요.
그런데 뭐가 문제인지 제대로 동작하지 않아서 그냥 새로 만들었습니다.
출처 : http://codeigniter-kr.org/qna/view/418/page/70
댓글목록
등록된 댓글이 없습니다.