• <kbd id="qyk40"></kbd>
  • <strike id="qyk40"></strike><samp id="qyk40"><pre id="qyk40"></pre></samp>

    在web前端開發中會遇到排序等功能,當然也可以用服務器端來排序,今天我做一個筆記,怎么用js來實現這些復雜的功能呢。

     

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

     

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

     

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

     

    1.把要排序的內容添加到數組里

     

    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.數據排序

     

     

    1. //數據排序

    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.匹配內容 加入到一個隱藏的排序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("");

     

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



     













































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

     


    特效出自:kevn-web前段開發


     

    穩定

    產品高可用性高并發

    貼心

    項目群及時溝通

    專業

    產品經理1v1支持

    快速

    MVP模式小步快跑

    承諾

    我們選擇聲譽

    堅持

    10年專注高端品質開發
    • 返回頂部
    四虎永久在线精品国产馆V视影院| 精品国产一区二区三区| 久久久久亚洲精品中文字幕| 日韩免费观看一区| 国产精品高清全国免费观看 | 国内精品视频一区二区八戒 | 日韩亚洲变态另类中文| 网曝门精品国产事件在线观看| 无码精品尤物一区二区三区 | 91久久精品国产91性色也| 久久精品国产亚洲av四虎| 99精品视频在线观看| 国产精品小黄鸭一区二区三区| 日韩一区二区三区精品| 日韩精品一区二区三区国语自制| 一区二区日韩国产精品| 国产女精品视频在ktv| 国产精品老熟女露脸视频| 日韩精品亚洲专区在线影视| 国产日产欧产精品精品蜜芽| 亚洲国产精品无码观看久久| 国产麻豆精品一区二区三区v视界 国产麻豆一精品一AV一免费 | 久久综合精品视频| 久久精品视频免费| 久久精品成人免费网站| 国产精品免费看久久久 | 国产精品久久婷婷六月丁香| 2020久久精品亚洲热综合一本| 精品国产VA久久久久久久冰| 国产夫妇精品自在线| 国产精品第13页| 国产chinesehd精品酒店| 99久久99久久精品免费看蜜桃| 国产精品久久久久鬼色| 3D动漫精品一区二区三区| 国内精品一区二区三区东京| 亚洲精品无码中文久久字幕| 麻豆国产在线精品国偷产拍| 精品国产污污免费网站入口在线 | 真实国产乱子伦精品免费| 久久精品?ⅴ无码中文字幕|