JavaScript写一个表格排序类
依稀记得那是上个星期六的下午，我参加了网易暑期实习生招聘笔试。考得相当糟糕，编程题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写一个表格排序类的更多相关文章
- 怎么用JavaScript写一个区块链？
几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简 ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表（目录）
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 目前,我们已经将一些行和列插入到表格中,并设置单元格的背景颜色,显示 RGB 值等. 例 7 ...
- 用JavaScript写一个区块链
几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...
- JavaScript写一个连连看的游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...
- 用javascript写一个emoji表情插件
概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...
随机推荐
- 【android】简易实现横向的ListView
众所周知,android里面的ListView是竖着的. 如果想要横向的话需要自定义一下ListView. CSDN上面有个人描述了一下一个国外大神的自定义横向ListVIew 请点击 --> ...
- 2017-3-2 C# WindowsForm 中label标签居中显示
有时候label标签要输出 label.text=""; 的语句,那么要把这个语句居中显示 1.要取消他的Autosize的值 2.拉大这个框,设置里面的文本的TextAlign ...
- 使用jQuery快速高效制作网页特效-----------------------------之jQuery事件与动画
1.基础事件 分为三个事件 1.1 window事件 所谓window事件,就是当用户执行某些会影响浏览器的操作时,而触发的事件. 1.2 鼠标事件 鼠标事件顾名思义就是当用户在文档上移动或单击鼠标时 ...
- 知识管理(KM) - 数据流
快速链接: 人力资源知识体系索引 本章主要列出知识管理(KM)中涉及到的所有表. 步骤 操作 相关表 说明 1 知识管理资料 基础资料,见附表1 2 知识主题(107301) KMBlg:主题 K ...
- Linux i2c子系统(三) _解决probe无法执行
如果你也遇到了填充了id_match_table,compitible怎么看都一样,但probe就是不执行(让我哭一会),你可以回头看一下上一篇的模板,我们这里虽然使用的是设备树匹配,但和platfo ...
- jquery 中时间的运用
运用Moment插件比较方面,有兴趣可以仔细阅读 http://momentjs.cn/
- DOM基础（一）
在我们刚刚学JavaScript的时候,就应该听说过,JavaScript是由三部分组成的.分别是ECMAScript,DOM和BOM组成的.ECMAScript是JavaScript的核心,它描述了 ...
- HTTP 返回状态代码详解
1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 100(继续)请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分:101(切换协议)请求者已要求服 ...
- sonarqube代码检测
1.安装java环境 略 2.下载sonarqube包 sonarqube与sonar-runner的下载地址:http://www.sonarqube.org/downloads/ 将下载好的软件包 ...
- Solr vs. Elasticsearch谁是开源搜索引擎王者
当前是云计算和数据快速增长的时代,今天的应用程序正以PB级和ZB级的速度生产数据,但人们依然在不停的追求更高更快的性能需求.随着数据的堆积,如何快速有效的搜索这些数据,成为对后端服务的挑战.本文,我们 ...