안녕하세요. 정상현입니다.: 테이블을 위한 자바스크립트 샘플

게시판, 자료실 등에 테이블을 자주 사용합니다.

하지만 테이블의 디자인은 만만하지 않게 산출되어 나오지요.

오늘 제가 만들어 놓은 테이블은 대충 이런 식입니다.

흠...제가 디자이너 출신이긴 하지만..-_- 영귀찮아서 대충 쳐서 만든것이니....

모든 부분은 css를 만들어 클래스만 주면 쉽게 만들 수 있는 부분입니다.

하지만 잘 생각해보면, 각각 tr 의 짝수줄만 색이 들어가 있습니다.

또 가장 마지막 라인은 dashed 가 빠진 클래스가 들어가 있네요.

이게 하드코딩으로 들어가는 부분이라면 문제는 전혀 되지 않습니다. 그냥 각각 tr에 클래스 값을 따로 넣어 주면 되기 때문입니다. 하지만 만약 개발이 붙는 테이블이라면 얘기가 조금 달라지지요.

개발하시는 분께서 어느정도로 어떤식으로 코딩하느냐에 따라 다르지만 통상은 한개의 라인을 잡아서 반복문을 줘 버리기 때문이죠.

</colgroup>

<tr>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

</table>

위와 같이 각각 tr에 클래스를 먹이고 더군다나 마지막에는 두개의 클래스가 함께 들어갔습니다. 이럴경우 개발자분은...

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

대충 위와같이 tr하나를 잡고 서버사이드 언어를 넣어 반복을 주시지요.

물론 신경써서 하나한 잡아주시는 분들도 계시지만 웹퍼블리셔라는 직군이 생긴이상 이정도는 퍼블리셔가 만들어 넘겨 주는게 이상적이라고 생각이 됩니다.

충분히 접근성 높으면서 내용에 제약이 되지않고, 표준을 지키는 스크립트로 컨트롤이 가능하기 때문이죠.

먼저 css입니다.

table#con_table{width:500px; color:#555555; font-size:12px; text-align:center; border-top:1px solid #575757;border-bottom:1px solid #575757}

table#con_table a{text-decoration:none; color:#CDA9A9;}

table#con_table a:hover{text-decoration:underline; color:#892525;}

table#con_table th{background:#C2DAD6; padding:8px 0; border-bottom:1px solid #7B7B7B}

table#con_table td{padding:10px 0 10px 0; background:#fff;border-bottom:1px dashed #CDCDCD}

table#con_table tr.gry td{background:#f2f2f0;}

table#con_table tr.last td{border-bottom:0px;}

특별한것은 없고 각각 속성을 설정후 메인 td를 잡아주고, 각각 tr 클레스에 따라 td속성값을 따로 줬습니다.

결국 사용될 td속성은 세가지군요. 그냥 td , 회색배경 td, 마지막에 사용될 보더 없는 td, 추가로 회색배경과 보더없는 td는 함께 사용될 수 있습니다.

(설명이 어렵..-_-;)

다음은 코딩 입니다.

</colgroup>

<tr>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

</table>

편의상 헤더부분등은 제외 했습니다.

또한 자바스크립트로 클레스를 추가 할 것이므로 tr에 클래스 등을 따로 넣지는 않았습니다.

이런 모습이 되겠군요.

다음은 자바스크립트를 코딩하도록 하겠습니다.

function tdBgChanger(){

var trs = document.getElementById('con_table').getElementsByTagName('tr');

var finalNum = Number(trs.length - 1);

for(var j=0;j<trs.length;j++){

if(j%2 == 0){

trs[j].className = 'gry';

if(j == finalNum){

trs[j].className = 'gry last';

}

}else{

if(j == finalNum){

trs[j].className = 'last';

}

tdBgChanger 라는 함수를 만들었습니다.

앞에서 만든 con_table 이라는 ID를 갖는 테이블의 tr 을 trs라는 변수에 저장해 두었습니다.

또, 마지막 tr에 클래스 값을 먹이기 위해 finalNum 이라는 변수에 전체 tr값에서 -1을 한 값을 대입해 저장해 두었습니다.

다음은 for문을 이용해 tr 수만큼 반복을 돌리는데 최초에 나오는 if문에서는 짝수열에 gry라는 클래스를 추가 합니다. 주의 하실 점은 for문을 돌리면 0 부터 반환을 한다는 것입니다. 따라서 첫째열에도 클래스가 적용됩니다.

하지만 첫째열은 th로 코딩되어 있으므로 클래스가 들어가더라도 스타일이 적용되지 않습니다.

첫번째 if문 안에 또다른 조건문이 있는데 이것은 모든 짝수 tr중에 마지막 tr이 존재할경우 rast라는 클래스를 추가로 주기 위함입니다.

그아래 else 다음으로 나오는 조건문도 마찬가지로 홀수 열 일경우중 마지막 tr이 포함되 있으면 gry가 없는 last클래스를 추가해 주는 거지요.

이렇게 하면 완성이네요.

소스도 보기 좋고 간단해 졌습니다. 개발자는 서버사이드 언어를 복잡하게 구성하지 않아도 되니 좋겠군요.

우리는 일일이 tr의 수를 세가며 클래스를 추가하지 않아도 됩니다.

개발이 붙은후 깨져서 보여지는 테이블을 굳이 수정해 주지 않아도 됩니다.

또한 자바스크립트를 꺼놓은 사용자 역시 컨텐츠 내용을 보는데 크게 제한사항이 없습니다.

아래 원본 샘플파일을 첨부해 두었습니다.

조금 허접하고, 위의 자바스크립트 보다 더 깔끔하게도 짤 수 있을듯 합니다만...

혹시나 모르시는 분도 계실까봐 이렇게 블로그에 올려 봅니다.

좋은 자료가 되어 드렸으면 좋겠네요.

테이블용 스크립트 샘플.html

안녕하세요. 정상현입니다.

2010년 6월 17일 목요일

테이블을 위한 자바스크립트 샘플

댓글 없음:

댓글 쓰기