利用js排序html表格
在web前端开发中会遇到排序等功能,当然也可以用服务器端来排序,今天我做一个笔记,怎么用js来实现这些复杂的功能呢。
在学习这个之前一定得用html dom jquery 的知识,要不没有办法看明白的,当然也不包括你是一个天才了。哈哈!
好了,先说一下思路,这里说一下,在学习一个js特效的时候思路很重要,可以说你不用对js多么的精通,但是一个功能放在你的面前,你必须有个很清晰的思路,这样做起来就很容易了,就算是再困难的特效也不例外!
一共有四个步骤:首先要给触发排序的控件添加事件,这里我就略过了。
1.把要排序的内容添加到数组里
var tIndex=parseInt($(this).index());
var valueArray=new Array();
var p=0;
for(var i=1; i<$("table tr").length; i++){
if(tIndex!=0){
valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());
}else{
valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();
}
p++;
}
2.数据排序
//数据排序
if(pk==1){
valueArray.sort(function(a,b){ return a
pk=2
}else{
valueArray.sort(function(a,b){ return a>b ? -1:1})
pk=1
}
3.匹配内容 加入到一个隐藏的排序div里
for(var i=0; i
for(var d=1; d<$("table tr").length; d++){
var valueText= tIndex!=0 ? parseInt($("table tr:eq("+d+") td").eq(tIndex).html()):$("table tr:eq("+d+") td").eq(tIndex).html();
if(valueArray[i]==valueText){
$("table tr").eq(d).clone().appendTo(".none")
}
}
}
4.重新整理html 排序,添加到视图里
var titleClone=$("table tr").eq(0).clone(true);
$("table").html("").append(titleClone);
$("table").append($(".none").html())
$(".none").html("");
通过这四个步骤就可以实现你要js排序的功能了,是不是很简单呢,也可以通过这个例子举一反三。这得看大家的想象力了。
姓名 | 年龄 | 出生年 | 分数 |
李百(L) | 15 | 1988 | 99 |
王易(W) | 25 | 2000 | 150 |
林明(L) | 18 | 1745 | 120 |
李姐(L) | 20 | 1996 | 130 |
推荐文章
2025-01-18
2024-11-28
2024-11-09
2024-10-25
2024-06-25
2024-01-04
2023-11-06
2023-10-30
2023-10-13
2023-10-10
稳定
产品高可用性高并发贴心
项目群及时沟通专业
产品经理1v1支持快速
MVP模式小步快跑承诺
我们选择声誉坚持
10年专注高端品质开发