表格排序的例子

最新推荐文章于 2024-11-08 17:40:21 发布

dujunzhi

最新推荐文章于 2024-11-08 17:40:21 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/dujunzhi/article/details/84086167

JavaScript 专栏收录该内容

41 篇文章

订阅专栏

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>