테이블 예제 - 짝수행과 홀수행의 배경색 변경 플러그인
.NET프로그래밍/jQuery 1.3.2 2009. 11. 18. 11:33 |
[TablePlugIn.htm]
<!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>
<title>짝수행과 홀수행의 배경색 변경 플러그인</title>
<style type="text/css">
.odd { background-color:Silver; }
.Even { background-color: Aqua; }
</style>
<script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
//[!] 배경색 변경을 jQuery 플러그인으로 업그레이드하자.
$.fn.alternateRowColors = function() {
$('tbody tr:odd', this).removeClass('even').addClass('odd');
$('tbody tr:even', this).removeClass('odd').addClass('even');
return this;
};
$(document).ready(function() {
$('table.tbl').each(function() {
var $table = $(this);
// 플러그인 호출
$table.alternateRowColors();
});
});
</script>
</head>
<body>
<table class="tbl" border="1">
<thead>
<tr>
<th> </th>
<th>제목</th>
<th>저자</th>
<th>출간일</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="../../ProductImages/thumbs/BOOK-01.jpg" /></td>
<td>쉽게 배우는 ASP.NET 2.0</td>
<td>박용준</td>
<td>2008</td>
<td>20000</td>
</tr>
<tr>
<td><img src="../../ProductImages/thumbs/COM-01.jpg" /></td>
<td>.NET Bible</td>
<td>박용준</td>
<td>2003</td>
<td>25000</td>
</tr>
<tr>
<td><img src="../../ProductImages/thumbs/HARDWARE-01.jpg" /></td>
<td>정보처리기능사</td>
<td>박용준</td>
<td>2000</td>
<td>18000</td>
</tr>
</tbody>
</table>
</body>
</html>
-------------------------------------------------------------------------------------
[실행결과]
'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글
| 카루셀(Carrousel) 플러그인 (0) | 2009.11.19 |
|---|---|
| 테이블 예제 - 테이블의 헤더 클릭시 해당 열 정렬 (0) | 2009.11.18 |
| 테이블 예제 - 짝수행과 홀수행의 배경색 변경 (0) | 2009.11.18 |
| 테이블 예제1 (0) | 2009.11.17 |
| 툴팁(Tooltip) : 풍선 도움말 (0) | 2009.11.17 |