function $(id) {
return (typeof(id)=="string")?document.getElementById(id):id;
}
//传递参数为表格的ID,列号,该列的数据类型
var sortTable = function(id,colNum,DataType,event){
this.event = event;
this.table = $(id); //得到要排序的表格
this.firstRow = this.table.rows[0]; //得到表格的第一行 也就是标题
this.firstCells = this.firstRow.cells; //得到表格的每一个单元格
this.colNum = colNum; //排序的列
this.DataType = DataType; //数据类型
this.tbody = this.table.tBodies[0]; //得到表格的内容 非表头
this.rows = this.tbody.rows; //内容的行数
this.downClass = "down"; //降序排序时表头的样式
this.upClass = "up"; //升序排序时表头的样式
this.trArray = new Array; //存放每一行的内容
this.defaultClass = "";
this.format(); //将表格数据装到数组中
}
sortTable.prototype = {
//将表格数据格式化到数组中
format:function() {
for(var i=0;i<this.rows.length;i++) {
this.trArray[i] = this.rows[i];
}
this.judge();
},
//判断是否是上一次排序的列
judge:function() {
var tag = "";
for(var i=0;i<this.firstCells.length;i++) {
if(i == this.colNum) {
tag = this.firstCells[i];
if(turn) {
this.addClass(tag,this.upClass);
turn = false;
} else {
this.addClass(tag,this.downClass);
turn = true;
}
} else {
this.addClass(this.firstCells[i],"");
}
}
if(this.table.index == this.colNum) {
this.trArray.reverse();
} else {
//调用排序函数 传递参数 升序或者降序
this.trArray.sort(this.getcreateSort(this.colNum,this.DataType));
}
this.createDom();
},
//创建转换过程
getcreateSort:function(colNum,datatype) {
return function createSort(a,b) {
var first = a.cells[colNum].firstChild.nodeValue;
var second = b.cells[colNum].firstChild.nodeValue;
var value1 = convert(first,datatype);
var value2 = convert(second,datatype);
if(value1 < value2) {
return -1;
} else if(value1 > value2) {
return 1;
} else {
return 0;
}
};
function convert(value,type) {
switch(type) {
case "int":return parseInt(value);break;
case "float":return parseFloat(value);break;
case "string":return value.toString();break;
case "data":return new Date(Date.parse(value));break;
default:return value.toString();break;
}
}
},
createDom:function() {
var frag = document.createDocumentFragment();
for(var i=0;i<this.trArray.length;i++) {
frag.appendChild(this.trArray[i]);
}
this.tbody.appendChild(frag);
this.table.index = this.colNum; //用作后面判断用
},
addClass:function(obj,classname) {
obj.className = classname;
}
}
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>简易表格排序</title>
<link rel="stylesheet" href="sort.css" type="text/css">
<script type="text/javascript" src="tableSort.js"></script>
<script type="text/javascript">
var turn = true;
</script>
</head>
<body>
<table border="1" width="400" id="sortTable" align="center">
<thead>
<tr id="head">
<th onclick="new sortTable('sortTable','0','string',event)">姓名</th>
<th onclick="new sortTable('sortTable','1','string',event)">性别</th>
<th onclick="new sortTable('sortTable','2','int',event)">年龄</th>
<th onclick="new sortTable('sortTable','3','date',event)">生日</th>
</tr>
</thead>
<tbody id="body">
<tr>
<td>陈超</td>
<td>男</td>
<td>21</td>
<td>1988-8-18</td>
</tr>
<tr>
<td>小陈</td>
<td>女</td>
<td>18</td>
<td>1989-3-18</td>
</tr>
<tr>
<td>小徐</td>
<td>女</td>
<td>28</td>
<td>1989-3-22</td>
</tr>
<tr>
<td>小猪</td>
<td>男</td>
<td>12</td>
<td>2000-8-19</td>
</tr>
<tr>
<td>重庆</td>
<td>男</td>
<td>20</td>
<td>2000-8-18</td>
</tr>
</tbody>
</table>
</body>
</html>
分享到:
相关推荐
一个基于纯j实现的 HTML Tables表格排序的例子代码。
使用javascript在客户端对表格进行排序的例子
页面表格实现不刷新排序,通过javascript 来实现的。例子很简单,希望能有所帮助
jquery 表格排序 自己写的个表格排序的小例子,希望对大家有帮助
一个关于EXTJs 表格 中文排序的例子
这次的例子,只是把Nicholas C .Zakas的例子理解了一下,代码是在学习表格排序时的Demo. 单个数据类型的排序比较简单,他这个例子的特别之处在于能兼容多种数据类型的排序。例子 很简单,但 排序的主方法,有三个...
这是一个表格脚本排序的例子,有6种方式,非常实用。。。。。。。。。。。。。。。。。。。。。。。。。。。
在网上找的(vue3+sortable.js根本跑不起来)网上好多例子在vue3下根据跑不起来于是,也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
js实现点击table表头字段,根据字段排序例子。在表中添加js代码后可以自动排序,非常方便!
Excel简单排序的例子.rar,按“科目名称”笔划顺序升序排序的简单示例。
js表格排序,数据区别色彩 这是扩展自网上的一个例子,使用外部js对表格进行操作
一个表格排序的js例子
一款依赖jquery实现表格排序和筛选表的例子。
该报表可以点击表头进行自动排序,JS实现,任意字符串和数字。
一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子
内容索引:脚本资源,jQuery,jquery排序,表格排序,隔行换色 jquery 表格排序、分页、隔行换色,高亮等操作例子集: Demo1--隔行,滑动,点击 变色. Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色. Demo3--...
实现高级表格根据某列文本、数值排序.zip易语言项目例子源码下载实现高级表格根据某列文本、数值排序.zip易语言项目例子源码下载 1.合个人学习技术做项目参考 2.适合学生做毕业设计参考 3.适合小团队开发项目参考
本文实例讲述了javascript操作表格排序的方法。分享给大家供大家参考。具体如下: 完整例子如下: <html> <head> <title>Table Sort Example</title> [removed] //转换器,将列的字段...
数字排序例子