<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>
分享到：
相关推荐
<title>JavaScript表格排序 table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { cursor: pointer; } (0)">...
总的来说，使用JavaScript实现的页面表格排序功能，不仅可以提高用户体验，还可以减少服务器负载，因为它是在客户端完成的，无需每次排序都向服务器发送请求。这个例子是JavaScript在网页交互设计中的一个典型应用，...
四、表格排序 对于表格，我们可以扩展以上方法，监听单元格的拖放事件。在`drop`事件中，不仅要更新单元格的顺序，还要调整相关行的顺序。这可能涉及到对表格数据的重新排序，尤其是当数据与后端同步时。 五、优化...
【标题】"Javascript表格排序大全"所涉及的知识点主要集中在JavaScript的前端开发技术上，特别是与数据处理和用户界面交互相关的部分。JavaScript是一种轻量级的脚本语言，广泛应用于网页和应用程序，其中表格排序是...
在JavaScript的世界里，实现表格（table）数据的自动排序是一项常见的需求。这通常涉及到对HTML DOM的操作以及数据处理。在给定的资源中，“原生js table表格自动排序效果”提供了一个无需依赖任何外部库（如jQuery...
JavaScript作为前端开发中不可或缺的语言，常被用来实现各种动态交互效果，包括表格排序。本文旨在介绍如何使用JavaScript实现表格排序的方法。 ### 知识点1：JavaScript排序算法的选择 实现表格排序的关键在于...
因此，使用前端技术实现表格排序变得尤为重要。 jQuery表格排序插件（jQuery TableSorter）是一种基于jQuery的轻量级插件，它可以快速地为HTML表格添加动态排序功能。该插件不仅使用简单、配置灵活，还支持多种排序...
在JavaScript编程中，实现表格数据...总之，JavaScript实现表格排序涉及事件处理、数据操作和DOM操作，熟练掌握这些技巧对于构建交互性强的Web应用至关重要。通过不断实践和优化，可以创造出高效、易用的表格排序功能。
总的来说，这个压缩包提供了一个完整的表格排序解决方案，包括前端的样式和逻辑实现。开发者可以研究源码，理解其工作原理，也可以直接将这些文件应用到自己的项目中，为用户提供方便的数据排序功能。此外，通过阅读...
javascript实现表格的单元格拖动排序，对实现图片的拖动排序有启发
在JavaScript编程中，表格排序是一项常见的需求，尤其是在数据展示和管理的应用中。本文将深入探讨如何实现JavaScript表格的顺序和逆序排序，并结合高亮显示技术，使用户能清晰地看到排序后发生变化的列。 首先，...
这个项目“jQuery动态表格数据分页检索排序代码”提供了一个纯前端实现的解决方案，无需服务器端的支持，使得用户可以更加便捷地浏览和管理大量数据。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理...
总的来说，掌握表格排序不仅可以提升Web应用的用户体验，也是对前端开发者基础技能的一种检验。通过实践这个源码，你可以深入了解JavaScript与DOM的交互，以及如何利用JavaScript实现动态效果，这对提升个人编程能力...
它简化了前端表格的排序逻辑，提升了用户体验，同时为开发者提供了丰富的定制选项，使得在不同场景下的数据展示和交互变得更加便捷和高效。无论你是初学者还是经验丰富的开发者，都应该掌握并合理运用这类插件，以...
TableSorter是一个专门用于表格排序的JavaScript插件，它扩展了基本的HTML表格功能，提供了多种排序方式，如升序、降序，甚至支持复杂的自定义排序规则。TableSorter能自动处理表格数据的排序，只需在初始化时配置好...
而“使用jQuery UI实现表格排序功能”是网页交互设计中的常见需求，尤其对于数据展示丰富的网页，如报表、数据分析页面等。jQuery UI 的 tablesorter 插件可以方便地实现这一功能，让表格数据可以根据用户的需求进行...
jQuery表格分页排序插件，如“SlimTable”，在网页开发中扮演着重要角色，尤其在处理大量数据展示时。这种插件能够有效地提升用户体验，因为它允许用户仅查看和操作他们关心的部分数据，而不是一次性加载所有信息。...
在现代Web应用中，处理大数据量的前端表格是常见的需求，尤其在数据分析、报表展示等领域。"大数据量高性能前端表格grid 动态加载数据"这一技术主题，旨在优化用户体验，解决因一次性加载大量数据导致的页面卡顿问题...
其次，前端滚动式表格的实现通常依赖于JavaScript库或框架，例如React、Vue、Angular等。这些库提供了丰富的组件和API，用于构建高度定制的滚动表格。例如，React中可以使用`react-virtualized`或`material-ui`的`...
JavaScript DataTables 是一款高度可定制、功能强大的前端表格插件，尤其适用于需要处理大量数据的网页应用。这个表格控件支持在PHP、Java和DotNet等后端框架中使用，可以方便地对数据进行排序、搜索、分页和格式化...