javascript前端表格排序
<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 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>?