利用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年專注高端品質開發