依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试。考得相当糟糕,编程题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. 关于c语言中栈和堆释放的问题

    #include<iostream> #include<string> using namespace std; int main() { string st; cin> ...

  2. jQuery ajax() 参数,回调函数,数据类型,发送数据到服务器,高级选项

    $.ajax({ options:/*类型:Object;  可选.AJAX 请求设置.所有选项都是可选的.*/ async:/*类型:Boolean; 默认值: true.默认设置下,所有请求均为异 ...

  3. Javascript高级程序设计——语法、关键字、保留字、变量、数据类型

    1.了解基本语法,JS大小写区分.注释风格.什么是严格模式等. 2.知道ES3和ES5的关键字和保留字大概有哪些,如果使用关键字会报什么错,使用保留字决定于特定浏览器引擎. 3.全局变量和局部变量的定 ...

  4. Javascript几种跨域方式总结

    在客户端编程语言中如javascript,同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法.只有当两个域具有相同的协议,相同的主机,相同的端口时,我们就认定 ...

  5. 利用jink调试程序,时间不准的解决办法

    前几天,做工程,遇到了利用jlink的SWD的模式调试程序,定时器延时不准的问题,上网搜了好多,终于找到了问题所在,感谢万能的网友.时间不对是因为Keil的设置问题. 以下是转自网友: 一.先说说仿真 ...

  6. AlloyTouch之无限循环select插件

    写在前面 当滚动的内容很多,比如闹钟里设置秒,一共有60项.让使用者从59ms滚回01ms是一件很痛苦的事情,所以: 在列表项太多的情况下,我们希望能够有个无限循环的滚动.00ms和01ms是无缝链接 ...

  7. 【经验】AngularJS

    1.关于ng-model <textarea id="feature_name" class="col-sm-3" placeholder="软 ...

  8. redis的数据类型 (一) 字符串

    redis中存储方式是以键值对存储的,所以叫做字典试.redis(Remote dictionary server)远程字典服务器 每个redis数据类型,都会有增加.删除,查看的功能,用实例来学习命 ...

  9. Spring MVC + Security 4 初体验(Java配置版)

    spring Version = 4.3.6.RELEASE springSecurityVersion = 4.2.1.RELEASE Gradle 3.0 + Eclipse Neno(4.6) ...

  10. 唐伯猫的 sql server 2008 的安装和操作记录

    在服务器win 2008 server r2 上安装sql 首先下载sql  server 2008  ,云盘有存储sql,很多论坛也有下载SQLEXPRADV_x64_CHS.exe 双击sql s ...