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