테이블의 행이 바뀔때 마다, 미리 지정해 놓은 두가지 배경색을 입힐 수 있는 방법은 사실상 jQuery말고도
여러가지 방법이 있게 마련입니다.
대표적으로 php에서는 if($i%1) 의 True / False 에 따라 "짝수행일때, 홀수행일때" 를 구분하는 방법을 사용하기도 하지만,
이를 보다 편리하게 할 수 있는 방법은 jQuery의 기본명령 속에서 찾아볼 수 있습니다.
바로 odd 와 even 을 참조하는 것입니다.
아래에 임시로 만들어 놓은 소스를 에디터에 붙여넣고 실행해 보시면 원하는 결과를 얻을 수 있을 것입니다.
(단, jQuery 라이브러리의 경로는 바꿔주십시오)
결과 :
만약 해당 테이블의 최상단행에 구분명과 같은 형식을 사용하고자 한다면 이를 따로 구분시키기 위해
<thead> 와 <tbody> 를 각각 선언할 필요가 있는데 이럴 때는 다음과 같은 방법을 사용합니다.
결과 :
즉, 최상단의 구분명이 삽입되어 있는 행(THEAD)은 건드리지 않고, 내용에 해당하는 행(TBODY)에만
스타일을 입히는 것이 가능합니다.
jQuery 의 편리함을 느낄 수 있는 부분들은 대개 "규칙적인 반복성" 을 띄는 경우에 속한 경우가 많습니다.
단순히 위의 테이블 스타일링 하나만을 갖고 jQuery의 편리성을 논하기는 어불성설일 수도 있겠지만,
차후에 소개할, 테이블작업의 꽃이라고도 불리우는 "테이블정렬" 을 보시게 되면.. 위와 같은 스타일링의
진가를 확인하실 수 있으리라 생각합니다.
여러가지 방법이 있게 마련입니다.
대표적으로 php에서는 if($i%1) 의 True / False 에 따라 "짝수행일때, 홀수행일때" 를 구분하는 방법을 사용하기도 하지만,
이를 보다 편리하게 할 수 있는 방법은 jQuery의 기본명령 속에서 찾아볼 수 있습니다.
바로 odd 와 even 을 참조하는 것입니다.
아래에 임시로 만들어 놓은 소스를 에디터에 붙여넣고 실행해 보시면 원하는 결과를 얻을 수 있을 것입니다.
(단, jQuery 라이브러리의 경로는 바꿔주십시오)
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){ //html 로딩이 완전히 끝난 뒤에 스크립트를 실행합니다
$('table tr:odd').addClass('style1'); //테이블의 홀수행에는 style1 스타일을 덧씌웁니다.
$('table tr:even').addClass('style2'); //테이블의 홀수행에는 style1 스타일을 덧씌웁니다.
});
</script>
<style>
table {border:1px solid #555;}
.style1 {BACKGROUND: #ccc;} //홀수행에 덧씌울 스타일입니다.
.style2 {BACKGROUND: #eee;} //짝수행에 덧씌울 스타일입니다.
</style>
</head>
<body>
<table>
<tr><td>첫번째TD</td></tr>
<tr><td>두번째TD</td></tr>
<tr><td>세번째TD</td></tr>
<tr><td>네번째TD</td></tr>
</table>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){ //html 로딩이 완전히 끝난 뒤에 스크립트를 실행합니다
$('table tr:odd').addClass('style1'); //테이블의 홀수행에는 style1 스타일을 덧씌웁니다.
$('table tr:even').addClass('style2'); //테이블의 홀수행에는 style1 스타일을 덧씌웁니다.
});
</script>
<style>
table {border:1px solid #555;}
.style1 {BACKGROUND: #ccc;} //홀수행에 덧씌울 스타일입니다.
.style2 {BACKGROUND: #eee;} //짝수행에 덧씌울 스타일입니다.
</style>
</head>
<body>
<table>
<tr><td>첫번째TD</td></tr>
<tr><td>두번째TD</td></tr>
<tr><td>세번째TD</td></tr>
<tr><td>네번째TD</td></tr>
</table>
</body>
결과 :
| 첫번째TD |
| 두번째TD |
| 세번째TD |
| 네번째TD |
만약 해당 테이블의 최상단행에 구분명과 같은 형식을 사용하고자 한다면 이를 따로 구분시키기 위해
<thead> 와 <tbody> 를 각각 선언할 필요가 있는데 이럴 때는 다음과 같은 방법을 사용합니다.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$('table tbody tr:odd').addClass('style1'); //tbody를 추가로 선언합니다
$('table tbody tr:even').addClass('style2'); //tbody를 추가로 선언합니다
});
</script>
<style>
table {border:1px solid #555;}
.style1 {BACKGROUND: #ccc;}
.style2 {BACKGROUND: #eee;}
</style>
</head>
<body>
<table>
<thead>
<tr><th>번호</th><th>내용</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>첫번째TD</td></tr>
<tr><td>2</td><td>두번째TD</td></tr>
<tr><td>3</td><td>세번째TD</td></tr>
<tr><td>4</td><td>네번째TD</td></tr>
</tbody>
</table>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$('table tbody tr:odd').addClass('style1'); //tbody를 추가로 선언합니다
$('table tbody tr:even').addClass('style2'); //tbody를 추가로 선언합니다
});
</script>
<style>
table {border:1px solid #555;}
.style1 {BACKGROUND: #ccc;}
.style2 {BACKGROUND: #eee;}
</style>
</head>
<body>
<table>
<thead>
<tr><th>번호</th><th>내용</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>첫번째TD</td></tr>
<tr><td>2</td><td>두번째TD</td></tr>
<tr><td>3</td><td>세번째TD</td></tr>
<tr><td>4</td><td>네번째TD</td></tr>
</tbody>
</table>
</body>
결과 :
| 번호 | 내용 |
|---|---|
| 1 | 첫번째TD |
| 2 | 두번째TD |
| 3 | 세번째TD |
| 4 | 네번째TD |
즉, 최상단의 구분명이 삽입되어 있는 행(THEAD)은 건드리지 않고, 내용에 해당하는 행(TBODY)에만
스타일을 입히는 것이 가능합니다.
jQuery 의 편리함을 느낄 수 있는 부분들은 대개 "규칙적인 반복성" 을 띄는 경우에 속한 경우가 많습니다.
단순히 위의 테이블 스타일링 하나만을 갖고 jQuery의 편리성을 논하기는 어불성설일 수도 있겠지만,
차후에 소개할, 테이블작업의 꽃이라고도 불리우는 "테이블정렬" 을 보시게 되면.. 위와 같은 스타일링의
진가를 확인하실 수 있으리라 생각합니다.
