依稀记得那是上个星期六的下午，我参加了网易暑期实习生招聘笔试。考得相当糟糕，编程题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 htmlCollection 65 var tableChildrenArr = changeEleToArr(tableChildren); 66 //order 67 tableChildrenArr.sort(function(tr1,tr2){ 68 //当时就是这个位子错了，我不知道怎么把数据传进排序函数了 69 //是不是有点悲哀 70 //更悲哀的是他还不让测试 71 return order(col,direction,isNum)(tr1,tr2) 72 }); 73 74 //create newchildren 75 var frag = document.createDocumentFragment(); 76 for(var i = 0; i < tableChildrenArr.length; i++){ 77 frag.appendChild(tableChildrenArr[i]); 78 } 79 //remove 80 for(var i = 0; i < tableChildren.length; i++){ 81 tbody.removeChild(tableChildren[i]); 82 } 83 84 //add 85 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表示你要按字典排序。