| TableSorting.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"> //[!] 배경색 변경을 플러그인으로 업그레이드 하자 $('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(); // start table sort $('th', $table).each(function (column) { // 헤더 클래스가 정렬 되어 있다면 ABC 순으로 정렬(오름차순) if ($(this).is('.sort-alpha')) { // 클릭시 정렬 실행 var direction = -1; // $(this).click(function () { direction = -direction; // 현재 행 가져오기 var rows = $table.find('tbody > tr').get(); rows.sort(function (a, b) { var keyA = $(a).children('td').eq(column).text().toUpperCase(); var keyB = $(b).children('td').eq(column).text().toUpperCase(); if (keyA < keyB) return -direction; // if (keyA > keyB) return direction; // return 0; }); // 정렬된 테이블을 추가 $table.alternateRowColors(); // 재정렬 } }); // end table sort }); // end each() }); // end ready() </script> </head> <body> <table class="tbl" border="1"> <thead> <tr> <th> </th> <th class="sort-alpha">제목</th> <th class="sort-alpha">저자</th> <th class="sort-alpha">출간일</th> <th class="sort-alpha">가격</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/Online-01.jpg" /></td> <td>정보처리 산업 기사</td> <td>김용원</td> <td>2005</td> <td>18000</td> </tr> </tbody> </table> </body> </html> |
'.Net Project > Jquery 1.3.2' 카테고리의 다른 글
| 88장 JQueryModel 카루셀 플러그인 (Carrousel.htm) (0) | 2009.11.25 |
|---|---|
| 87장 JQueryModel 텍스트박스 자동 완성 기능(AutoComplete.htm) (0) | 2009.11.25 |
| 85장 JQuerySample 짝수행과 홀수행의 배경색 변경 (TablePlugIn.htm) (0) | 2009.11.25 |
| 84장 JQuerySample 예시 테이블 (TableEvenOdd.htm) (0) | 2009.11.25 |
| 83장 JQuerySample 예시 테이블 (Table.htm) (0) | 2009.11.25 |