91亚洲精华国内精华精华液_国产高清在线精品一区不卡_精品特级一级毛片免费观看_欧美日韩中文制服有码_亚洲精品无码你懂的网站369

在web前端開發(fā)中會遇到排序等功能,當(dāng)然也可以用服務(wù)器端來排序,今天我做一個筆記,怎么用js來實(shí)現(xiàn)這些復(fù)雜的功能呢。

 

在學(xué)習(xí)這個之前一定得用html dom jquery 的知識,要不沒有辦法看明白的,當(dāng)然也不包括你是一個天才了。哈哈!

 

好了,先說一下思路,這里說一下,在學(xué)習(xí)一個js特效的時候思路很重要,可以說你不用對js多么的精通,但是一個功能放在你的面前,你必須有個很清晰的思路,這樣做起來就很容易了,就算是再困難的特效也不例外!

 

一共有四個步驟:首先要給觸發(fā)排序的控件添加事件,這里我就略過了。

 

1.把要排序的內(nèi)容添加到數(shù)組里

 

  1. var tIndex=parseInt($(this).index());

  2. var valueArray=new Array();

  3. var p=0;

  4. for(var i=1; i<$("table tr").length; i++){

  5.  

  6. if(tIndex!=0){

  7. valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());

  8. }else{

  9. valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();

  10. }

  11.  

  12. p++;

  13.  

  14. }

 

2.數(shù)據(jù)排序

 

 

  1. //數(shù)據(jù)排序

  2. if(pk==1){

  3. valueArray.sort(function(a,b){ return a

  4. pk=2

  5. }else{

  6. valueArray.sort(function(a,b){ return a>b ? -1:1})

  7. pk=1

  8. }

 


3.匹配內(nèi)容 加入到一個隱藏的排序div里

  1. for(var i=0; i

  2. for(var d=1; d<$("table tr").length; d++){

  3. var valueText= tIndex!=0 ? parseInt($("table tr:eq("+d+") td").eq(tIndex).html()):$("table tr:eq("+d+") td").eq(tIndex).html();

  4. if(valueArray[i]==valueText){

  5. $("table tr").eq(d).clone().appendTo(".none")

  6. }

  7. }

  8.  

  9. }

 


4.重新整理html 排序,添加到視圖里


  1. var titleClone=$("table tr").eq(0).clone(true);

  2. $("table").html("").append(titleClone);

  3.  

  4. $("table").append($(".none").html())

  5.  

  6. $(".none").html("");

 

通過這四個步驟就可以實(shí)現(xiàn)你要js排序的功能了,是不是很簡單呢,也可以通過這個例子舉一反三。這得看大家的想象力了。



 













































姓名 年齡 出生年 分?jǐn)?shù)
李百(L) 15 1988 99
王易(W) 25 2000 150
林明(L) 18 1745 120
李姐(L) 20 1996 130

 


特效出自:kevn-web前段開發(fā)


 

穩(wěn)定

產(chǎn)品高可用性高并發(fā)

貼心

項(xiàng)目群及時溝通

專業(yè)

產(chǎn)品經(jīng)理1v1支持

快速

MVP模式小步快跑

承諾

我們選擇聲譽(yù)

堅(jiān)持

10年專注高端品質(zhì)開發(fā)
  • 返回頂部