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

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

         (function(){

             window.TableOrder = function(table){

                 if(typeof table == "undefined"){

                     throw new Error("params error");

                     return ;

                 }

                 this.table = document.getElementById(table);

                 if(this.table == null){

                     throw new Error("not found the table");

                     return ;

                 }

             }

             function order(col,direction,isNum){

                 return function(tr1,tr2){

                     var v1 = tr1.children[col].innerHTML;

                     var v2 = tr2.children[col].innerHTML;

                     if(isNum){

                         try{

                             v1 = parseFloat(v1);

                             v2 = parseFloat(v2);

                         }catch(e){

                             throw new Error('illegal operation')

                         }

                         v1 = parseFloat(v1);

                         v2 = parseFloat(v2);

                         if(direction == "asc"){

                             return v1-v2;

                         }else{

                             return v2-v1;

                         }

                     }else{

                         if(direction == "asc"){

                             return v1.localeCompare(v2);

                         }else{

                             return v2.localeCompare(v1);

                         }

                     }

                 }

             }

             function changeEleToArr(ele){

                 var trArr = [];

                 for(var i = 0; i < ele.length; i++){

                     trArr.push(ele[i]);

                 }

                 return trArr;

             }

             TableOrder.prototype.orderBy = function(col,isNum){

                 var token = col.split(" ");

                 if(token.length>2 || Number(token[0])=="NaN"){

                     throw new Error("orderBy():params must be xx xx，true/false");

                     return ;

                 }

                 var col = parseInt(token[0].trim());

                 var direction = token[1].trim().toLowerCase();

                 var isNum = typeof isNum =="undefined" ? false : isNum;

                 var tbody = this.table.children[1]

                 var tableChildren = tbody.children;//tr htmlCollection

                 var tableChildrenArr = changeEleToArr(tableChildren);

                 //order

                 tableChildrenArr.sort(function(tr1,tr2){

                                //当时就是这个位子错了，我不知道怎么把数据传进排序函数了

                                //是不是有点悲哀

                                //更悲哀的是他还不让测试

                     return order(col,direction,isNum)(tr1,tr2)

                 });

                 //create newchildren

                 var frag = document.createDocumentFragment();

                 for(var i = 0; i < tableChildrenArr.length; i++){

                     frag.appendChild(tableChildrenArr[i]);

                 }

                 //remove

                 for(var i = 0; i < tableChildren.length; i++){

                     tbody.removeChild(tableChildren[i]);

                 }

                 //add

                 tbody.appendChild(frag);

             }

         })(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表示你要按字典排序。

JavaScript写一个表格排序类的更多相关文章

  1. 怎么用JavaScript写一个区块链？

    几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...

  2. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简 ...

  3. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表（目录）

    HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...

  4. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...

  5. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...

  6. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 目前,我们已经将一些行和列插入到表格中,并设置单元格的背景颜色,显示 RGB 值等. 例 7 ...

  7. 用JavaScript写一个区块链

    几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...

  8. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

  9. 用javascript写一个emoji表情插件

    概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...

随机推荐

  1. Linux系统（二）软件的安装与卸载

    序言 上一篇我们了解啦Linux系统中,根目录下的各个文件夹是做什么用的啦,也学会文件如何压缩打包.那么接下来我们就该用到这个系统啦.用这个系统,就是用这个系统的软件,那么我们对我们需要的软件如何安装 ...

  2. 开源中文分词工具探析（四）：THULAC

    THULAC是一款相当不错的中文分词工具,准确率高.分词速度蛮快的:并且在工程上做了很多优化,比如:用DAT存储训练特征(压缩训练模型),加入了标点符号的特征(提高分词准确率)等. 1. 前言 THU ...

  3. 配置apache

    1. 修改httpd.conf文件 # vi  /usr/local/apache/conf/httpd.conf 1) 设置根目录的路径 根目录是指Apache存放配置文件和日志文件的目录,配置参数 ...

  4. C#基础——集合及特殊集合

    集合 集合的基本信息: Systerm.Collections命名空间包含接口和类,这些接口和类定义各种对象(如列表.队列.位数组.哈希表和字典)的集合. Systerm.Collections.Ge ...

  5. HTML 5入门知识（三）

    <canvas>标签 在网页中使用canvas元素,像使用其他HTML标签一样简单,然后利用JavaScript脚本调用绘图API,绘制各种图形.canvas拥有多种绘制路径.矩形.圆形. ...

  6. VS.NET2010水晶报表安装部署[VS2010]

    水晶报表VS2010版IDE安装标准版SAP Crystal Reports, version for Visual Studio 2010 - Standard: 下载地址: http://down ...

  7. Host文件修改后无效的解决办法

    什么是hosts文件? 简单的说,hosts文件是用于本地dns服务(相关主题:什么是DNS缓存,如何清除DNS缓存?)的,采用ip 域名的格式写在一个文本文件当中,Hosts是一个没有扩展名的系统文 ...

  8. 巧用*_his表记录操作历史

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 许多OLTP应用的开发者都知道,一些重要的操作要记录操作历史,把操作前的数据备份到历史表,然后再执行相应的修改操作.这样可以获取某个 ...

  9. oracle目录操作

    1.创建目录 create directory dir_name as 'dir_path'  (dir_path必须事先手动创建) 2.授权 grant read,write on director ...

  10. iOS 获取手机型号，系统版本

    新添加判断iPhone 7.iPhone 7 Plus ,我手里没有7,判断不对表打我~ FQ找的资料:http://www.iphonehacks.com/download-iphone-ios-f ...