var i = 0;
$(document).ready(myFunction);
function myFunction()
{
$('<table id="table" width="100" height="100" border="1"></table>')
.appendTo('body')
.bind('click',myclick);
$("#sortASC").click(function(){
SortArray.array = $("#table tr");
SortArray.sortAsc(0,$("#table tr").length-1);
$("#table tr").detach();
$.each(SortArray.array,function(){
$("#table").append(this);
})
});
$("#sortDESC").click(function(){
SortArray.array = $("#table tr");
SortArray.sortDesc(0,$("#table tr").length-1);
$("#table tr").detach();
$.each(SortArray.array,function(){
$("#table").append(this);
})
});
}
function myclick(){
$('<tr id="'+(i++)+'"><td>'+(i)+'</td></tr>')
.appendTo($(this));
}
var SortArray={
array:[],
sortDesc:function(low,high){
if(low<high){
var middle = this.getMiddleDESC(low,high);
this.sortDesc(0,middle -1);
this.sortDesc(middle +1,high);
}
},
sortAsc: function(low,high){
if(low<high){
var middle = this.getMiddleASC(low,high);
this.sortAsc(0,middle -1);
this.sortAsc(middle +1,high);
}
},
getMiddleDESC:function(low,high){
var temp = this.array[low];
while(low<high){
while(low<high && parseInt($(this.array[low]).attr("id")) > parseInt($(this.array[high]).attr("id"))){
high--;
}
this.array[low] = this.array[high];
while(low<high && parseInt($(this.array[low]).attr("id")) <= parseInt($(this.array[low]).attr("id"))){
low++;
}
this.array[high] = this.array[low];
}
this.array[low] = temp;
return low;
},
getMiddleASC: function(low,high){
var temp = this.array[low];
while(low<high){
while(low<high && parseInt($(this.array[low]).attr("id")) < parseInt($(this.array[high]).attr("id"))){
high--;
}
this.array[low] = this.array[high];
while(low<high && parseInt($(this.array[low]).attr("id")) >= parseInt($(this.array[low]).attr("id"))){
low++;
}
this.array[high] = this.array[low];
}
this.array[low] = temp;
return low;
}
}
<div class="clickme">Click here</div>
<input id="sortASC" type="button" value="升序" />
<input id="sortDESC" type="button" value="降序" />
分享到:
相关推荐
本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能,这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**:首先,理解jQuery的基础是至关重要的。...
对于"jquery实现table的动态排序"这个主题,我们将会深入探讨如何利用jQuery来实现表格数据的动态排序,以便用户可以按照不同列的值进行升序或降序排列,而无需重新加载页面。 首先,我们需要一个包含数据的HTML...
在网页开发中,数据展示是不可或缺的一部分,而jQuery实现的分页排序Table组件则为开发者提供了高效、灵活的方式来处理大量数据的展示问题。这个组件通常用于动态加载和组织表格数据,使得用户可以轻松浏览和操作...
本篇文章将深入探讨“jQuery Table Sort”插件,这是一种专门用于在jQuery环境下对表格数据进行排序的工具。 首先,我们要理解jQuery Table Sort插件的基本工作原理。这个插件允许用户通过点击表格的表头来实现数据...
在这个项目中,`jQuery`被用来实现一个功能,即在HTML表格(`table`)中对数据进行排序,用户只需点击表头就能看到排序的效果。这种方式相较于在服务器端进行排序,具有更高的效率,因为数据的处理是在客户端完成的...
《jQuery UI Table:深入解析与应用实践》 jQuery UI Table是一款基于jQuery库的插件,用于创建功能丰富的表格。在Web开发中,表格是展示数据的常见方式,jQuery UI Table通过提供可定制的样式和交互功能,使得网页...
3. **排序与搜索**:结合jQuery或其他JavaScript库(如Bootstrap DataTables),可以实现分页的同时支持表格的排序和搜索功能。 四、优化与注意事项 - 考虑到用户体验,分页请求应尽可能快速,避免用户等待。 - 为...
本教程将详细讲解如何使用Jquery库实现前端表格(table)按表头(th)进行排序。Jquery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及动画效果,非常适合用于此类交互功能的实现。 首先,我们需要理解...
对于压缩包中的"JQuery 简单易用 table排序"文件,它可能包含了实现上述功能的示例代码或者完整的jQuery插件。通过查看和学习这些代码,你可以更好地理解如何在实际项目中应用这些知识。 总的来说,利用jQuery实现...
### jQuery Table静态排序知识点 #### 一、简介 在网页开发过程中,经常需要对表格数据进行排序处理,以便用户能够更方便地查看和管理数据。jQuery Tablesorter插件为实现这一功能提供了一种简单而有效的方法。...
本文将详细讲解如何使用jQuery来自定义Table,以及动态构建Table的相关技术。 首先,让我们理解“自定义Table”的概念。在网页开发中,HTML的`<table>`元素通常用于展示结构化数据,但其样式和功能相对有限。通过...
### JQuery 获取 Table 一列值的方法详解 在 Web 开发中,经常需要处理表格数据,尤其是在需要对表格中的数据进行批量操作时。使用 JQuery 可以非常方便地获取表格(`<table>`)中某一列的所有值。下面将详细介绍...
**jQuery Custom Table** 是一个基于JavaScript库jQuery的自定义表格插件,主要用于满足开发者在不同业务场景下的数据展示需求。这个插件允许用户根据自身业务逻辑进行高度定制,以适应不断变化的用户界面和交互需求...
本主题将详细探讨如何使用jQuery实现表格(table)中的行上移、下移和置顶功能,这对于数据排序和用户交互至关重要。 一、jQuery基础 在开始之前,确保已引入jQuery库。你可以通过以下方式在HTML文件中添加引用: ...
本示例主要关注如何利用jQuery实现在HTML表格(table)中移动行(tr)的同时保持行内的序号不变,这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点: 1. jQuery选择器与DOM操作: jQuery提供了...
本文将深入探讨“jQuery排序”和“jQuery动态修改列”这两个主题,帮助开发者更好地理解和应用jQuery。 首先,让我们来看看“jQuery排序”。在网页开发中,我们经常需要对数据进行排序,例如表格中的行或列表项。...
jQuery 表格(jQuery Table)则是利用 jQuery 库来创建、操作和美化表格的一种技术。在本篇文章中,我们将深入探讨如何使用 jQuery 实现功能丰富的表格,包括数据加载、排序、过滤和分页等。 首先,创建一个基本的 ...
例如,`jQuery DataTables` 是一个广泛使用的插件,它提供了强大的表格功能,包括分页、排序、搜索等。只需在页面中引入插件的CSS和JS文件,然后对表格应用`dataTable()`方法,就可以轻松实现分页。此外,`bootstrap...
在实际项目中,`Table UI`插件可能会提供更高级的定制选项,如预定义的主题、分页、排序和过滤等功能。你需要查看具体插件的文档来了解如何结合使用。 总结,实现`jQuery table UI`插件制作的CSS表格隔行变色特效,...
本主题聚焦于jQuery插件中的一个关键功能:table排序。"jQuery插件集之(table排序)各种排序+Demo"提供了一种高效、灵活的方式来组织和操作HTML表格中的数据。 1. **jQuery插件的使用** jQuery插件通常是开发者为了...