83.jQuery - TableSorting (정렬) (13.Sample )
| 04.TableSorting.htm |
|
<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="../../jQuery/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(); //참고용 소스이다. //테이블 헤더 정렬 : start table sort $('th',
$table).each(function(column) { //해더의 CSS클래스가 sort-alpha로 설정되어있다면, ABC순으로 정렬 if
($(this).is('.sort-alpha'))
{ var direction = -1; //클릭시 정렬 실행 : 토글링으로 변경 $(this).click(function()
{ direction =
-direction; var rows = $table.find('tbody
> tr').get(); //현재 선택된 헤더관련 행 가져오기 //자바스크립트의 sort 함수를 사용해서 오름차순 정렬 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; }); //정렬된 행을 테이블에 추가 $.each(rows, function(index, row) { $table.children('tbody').append(row) });
$table.alternateRowColors(); //재정렬 }); }
}); //end table sort });
});
</script> </head> <body>
<table
class="tbl"
border="1">
<thead> <tr> <th> </th> <th class="sort-alpha">제목</th> <!-- 제목 클릭 시 정렬 --> <th>직업</th> <th>이름</th> </tr>
</thead>
<tbody
align="center"> <tr> <td><img src="../../images/j1.jpg" /></td> <td>완전좋앙</td> <td>배우</td> <td>조선옥</td> </tr> <tr> <td><img src="../../images/j2.jpg"
/></td> <td>최고임</td> <td>배우</td> <td>조선옥</td> </tr> <tr> <td><img src="../../images/j3.jpg"
/></td> <td>이쁘다</td> <td>배우</td> <td>조선옥</td> </tr>
</tbody>
</table> </body> </html> |
| 결과화면 |
[그림83-1] |
04.TableSorting.htm