表格排序的例子
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>