<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>
分享到：
相关推荐
页面表格实现不刷新排序，通过javascript 来实现的。例子很简单，希望能有所帮助
javascript实现表格的单元格拖动排序，对实现图片的拖动排序有启发
分享一款原生js table表格自动排序效果，个人感觉很好用
javascript表格排序（顺序和逆序）并高亮显示，通过使用排序后。然所在的那一列进行高亮显示
javascript方法让表格按表头中某列排序，同excel功能
本文实例讲述了javascript操作表格排序的方法。分享给大家供大家参考。具体如下： 完整例子如下： <html> <head> <title>Table Sort Example</title> [removed] //转换器，将列的字段...
一款纯前端类似excel的在线表格，功能强大、配置简单、完整源码。 特性 格式设置：样式，条件格式，文本对齐及旋转，文本截断、溢出、自动换行，多种数据类型，单元格内多样式 单元格：拖拽，下拉填充，多选区，...
目前一直在学习WEB前端的知识。下面贴出最近完成的一个可排序表格.
用于b/s前端表格数据排序的方法,使用javascript 操作table,可以选择对表格中任一部分进行排序的说
在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，...
js实现table表列的排序 声明：本例子根据《JavaScript高级程序设计》（作者 Nicholas C.Zakas） 该书第12章进行改写,主要是把表列排列的属性和方法封装到了一个对象中去
多字段排序，实现的方式从大的层面上可以分为后端实现和前端实现。 后端排序 后端实现排序可以在数据库层面实现或者在应用程序层面实现。 数据库层面实现多字段排序非常简单，使用SQL的排序指令“Order By”即可——...
SYSTableSorter多功能插件是基于前端JavaScript开发出来的不依赖任何第三方库的原生js插件,现已更新到3.1版本,功能更强大，浏览器支持更全面。 支持分页，排序，列表拖拽，支持多条件搜索，Excel文档下载(当前页和...
JavaScript基础语法31_数组的排序 JavaScript基础语法32_时间和日期 JavaScript基础语法33_时间和日期 JavaScript基础语法34_时间和日期 JavaScript基础语法35_字符串概述 JavaScript基础语法36_字符串常用方法 ...
在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，...
SolrJS视图SolrJSView 是一个 JavaScript/Jquery Web 前端库，用于创建 [Apache SOLR] 的用户界面。 数据显示在表格和弹出式文档视图中。 该应用程序还可以使用 Maven 部署为任何 J2EE Web 容器中的 WAR 文件。 这个...
│ dataTables 表格排序，检索插件 │ WebUploader 百度文件上传组件 │ lightbox2 图片预览组件 │ │ html5.js html5插件，让低版本IE支持html5元素 │ DD_belatedPNG_0.0.8a-min.js 解决IE6png透明 ...
本javascript软件主要功能是任意拖动html的table的td来整行交换位置。
本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...