JavaScript写一个表格排序类

来源：互联网发布：网络分销渠道的优势编辑：程序博客网时间：2024/06/06 19:46

依稀记得那是上个星期六的下午，我参加了网易暑期实习生招聘笔试。考得相当糟糕，编程题3个题通过了2个，简答题没做对，选择题貌似是20个题猜了6～7个，99%是挂了，唉唉唉！生活不只眼前的苟且，学习的脚步还得向前迈进。现在来做一做网易的简答题。

题目是这样的：一个表格有三列，分别是姓名、学号、成绩，要求点击成绩，则按成绩从高到低排列，再点击一次则从低到高，如此循环。啊呀呀！这个不就是简单的表格排序吗？是的，然而我错了。小学老师老师告诉我知错能改就是好孩子，不知道网易怎么看呢？管他怎么看，我先把错改了再说......于是乎，小弟写了一个表格排序类，可对任意列排序，网易啊网易啊，有没有看到，我不仅改错了，还拔高了。我的代码是这个样子的：

 1         (function(){ 2             window.TableOrder = function(table){ 3                 if(typeof table == "undefined"){ 4                     throw new Error("params error"); 5                     return ; 6                 } 7  8                 this.table = document.getElementById(table); 9                 if(this.table == null){10                     throw new Error("not found the table");11                     return ;12                 }13             }14 15 16             function order(col,direction,isNum){17                 return function(tr1,tr2){18                     var v1 = tr1.children[col].innerHTML;19                     var v2 = tr2.children[col].innerHTML;20                     if(isNum){21                         try{22                             v1 = parseFloat(v1);23                             v2 = parseFloat(v2);24                         }catch(e){25                             throw new Error('illegal operation')26                         }27                         v1 = parseFloat(v1);28                         v2 = parseFloat(v2);29                         if(direction == "asc"){30                             return v1-v2;31                         }else{32                             return v2-v1;33                         }34                     }else{35                         if(direction == "asc"){36                             return v1.localeCompare(v2);37                         }else{38                             return v2.localeCompare(v1);39                         }40                     }41                 }42             }43 44             function changeEleToArr(ele){45                 var trArr = [];46                 for(var i = 0; i < ele.length; i++){47                     trArr.push(ele[i]);48                 }49 50                 return trArr;51             }52 53             TableOrder.prototype.orderBy = function(col,isNum){54                 var token = col.split(" ");55                 if(token.length>2 || Number(token[0])=="NaN"){56                     throw new Error("orderBy():params must be xx xx，true/false");57                     return ;58                 }59 60                 var col = parseInt(token[0].trim());61                 var direction = token[1].trim().toLowerCase();62                 var isNum = typeof isNum =="undefined" ? false : isNum;63                 var tbody = this.table.children[1]64                 var tableChildren = tbody.children;//tr htmlCollection65                 var tableChildrenArr = changeEleToArr(tableChildren);66                 //order67                 tableChildrenArr.sort(function(tr1,tr2){68                                //当时就是这个位子错了，我不知道怎么把数据传进排序函数了69                                //是不是有点悲哀70                                //更悲哀的是他还不让测试71                     return order(col,direction,isNum)(tr1,tr2)72                 });73 74                 //create newchildren75                 var frag = document.createDocumentFragment();76                 for(var i = 0; i < tableChildrenArr.length; i++){77                     frag.appendChild(tableChildrenArr[i]);78                 }79                 //remove80                 for(var i = 0; i < tableChildren.length; i++){81                     tbody.removeChild(tableChildren[i]);82                 }83 84                 //add85                 tbody.appendChild(frag);86                 87 88             }89         })(window);

听说有了这个类，妈妈再也不用担心我不会表格排序了。这是真的吗？试试看！

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <table id="table" border="1">        <thead>            <tr>                <td>姓名</td>                <td>性别</td>                <td id="score">成绩</td>            </tr>        </thead>        <tbody>            <tr>                <td>haha</td>                <td>男</td>                <td>55</td>            </tr>            <tr>                <td>xixi</td>                <td>女</td>                <td>88</td>            </tr>            <tr>                <td>hehe</td>                <td>女</td>                <td>11</td>                </tr>        </tbody>            </table>        <script type="text/javascript" src="orderTable.js"></script>    <script type="text/javascript">    (function(window){        var isSort = false;        var tableSort = new TableOrder("table")        window.addEventListener("DOMContentLoaded",handler,false);        function handler(e){            var score = document.getElementById("score");            score.addEventListener("click",function(e){                if(!isSort){                    tableSort.orderBy("2 desc",true);                    isSort = !isSort;                }else{                    tableSort.orderBy("2 asc",true);                    isSort = !isSort;                }            },false)        }    })(window)                            </script></body></html>

来看一看效果，不点的时候是这样的

点一下是这样的

再点一下

哈哈，原来是真的，妈妈真的不用担心我的表格排序了。而且，可以对任意列进行排序，我们的orderBy（）只用传进去两个参数，第一个参数是一个字符串，表示是对第几列排序（下标从0开始哦），还有是降序还是升序，desc表示降序，asc表示升序。比如“0 asc”就表示按第一列升序排列;第二个参数是一个布尔值，true表示你要按数字排序，false表示你要按字典排序。

阅读全文

0 0