<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>run horse example</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.sort-char,.sort-numeric,.sort-date {background-color:#D8D5D3;}
.odd {background-color:#FFFF99;}
.even {background-color:#CC99FF;}
.sorted {background-color:#94FA99;}
table {border-collapse:collapse;}
</style>
<script language="JavaScript1.2">
$.fn.alternateRowColors = function() {
$('tbody tr:odd', this).removeClass('even').addClass('odd');
$('tbody tr:even', this).removeClass('odd').addClass('even');
return this;
};
$(document).ready(function(){
var alternateRowColors = function($table) {
$('tbody tr:odd', $table).removeClass('even').addClass('odd');
$('tbody tr:even', $table).removeClass('odd').addClass('even');
};
$('table.sortable').each(function(){
var $table = $(this);
alternateRowColors($table);
$('th',$table).each(function(column){
var findSortKey;
if($(this).is('.sort-char')){//按字符排序
findSortKey = function($cell) {
return $cell.find('.sort-key').text().toUpperCase()+ ' ' +$cell.text().toUpperCase();
};
}
else if($(this).is('.sort-numeric')) {//按数值排序(价格等)
findSortKey = function($cell) {
var key = parseFloat($cell.text().replace(/^[^\d.]*/,''));
return isNaN(key) ? 0 : key;
};
}
else if($(this).is('.sort-date')) {//按日期排序
findSortKey = function($cell) {
return Date.parse('1 '+$cell.text());
};
}
if(findSortKey) {
$(this).addClass('clickable').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
}).click(function(){
var newDirection = 1;//为了使表格既能升序排又能降序排
if($(this).is('.sorted-asc')){
newDirection = -1;
}
var rows = $table.find('tbody > tr').get();
$.each(rows, function(index, row) {
row.sortKey = findSortKey($(row).children('td').eq(column));
});
rows.sort(function(a, b){
if(a.sortKey < b.sortKey) return -newDirection;
if(a.sortKey > b.sortKey) return newDirection;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
row.sortKey = null;
});
$table.find('th').removeClass('sorted-asc').removeClass('sorted-desc');
var $sortHead = $table.find('th').filter(':nth-child('+(column+1)+')');
if(newDirection == 1) {
$sortHead.addClass('sorted-asc');
}else {
$sortHead.addClass('sorted-desc');
}
//突出显示排序后的列(换个背景颜色)
$table.find('td').removeClass('sorted').filter(':nth-child('+(column+1)+')').addClass('sorted');
$table.alternateRowColors($table);
});
}
});
});
});
</script>
</head>
<body><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><center>
<TABLE class="sortable" id="my-data" border=1 bordercolor="#FF8000" cellpadding=2>
<thead>
<TR>
<Th class="sort-char">Name</Th>
<Th class="sort-numeric">Age</Th>
<Th class="sort-numeric">QQ</Th>
<Th class="sort-numeric">Tel</Th>
<Th class="sort-char">Email</Th>
<Th class="sort-date">Date</Th>
<Th class="sort-numeric">Price</Th>
</TR>
</thead>
<tbody>
<TR>
<TD>Tom</TD>
<TD>23</TD>
<TD>458712</TD>
<TD>13075621819</TD>
<TD>glenn@zhouzhipeng.com</TD>
<TD>Jun 2010</TD>
<TD>$25.80</TD>
</TR>
<TR>
<TD>Jim</TD>
<TD>52</TD>
<TD>3320088</TD>
<TD>13855221111</TD>
<TD>andy@lau.com</TD>
<TD>Nov 2005</TD>
<TD>$88.50</TD>
</TR>
<TR>
<TD>Jhon</TD>
<TD>43</TD>
<TD>99228</TD>
<TD>13022228889</TD>
<TD>James@bond.com</TD>
<TD>Mar 1983</TD>
<TD>$730.0</TD>
</TR>
<TR>
<TD>God</TD>
<TD>243</TD>
<TD>19228</TD>
<TD>13622228889</TD>
<TD>bill@microsoft.com</TD>
<TD>Jan 2005</TD>
<TD>$25.55</TD>
</TR>
</tbody>
</TABLE></center>
</body>
</html>