带列排序功能的表格

最新推荐文章于 2020-04-22 15:03:18 发布

beattwo

最新推荐文章于 2020-04-22 15:03:18 发布

阅读量123

点赞数

分类专栏：文章转载文章标签： prototype XHTML HTML

文章转载专栏收录该内容

5 篇文章 0 订阅

订阅专栏


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>K2046.TableSorter</title>
<style type="text/css">
body{font-size:12px;line-height:25px;}
tr{height:25px;}

td{font-size:12px;text-align:center;}
.SortDe
</style>

</head>

<body>
<table border="0" style="border:solid 1px #DDDDDD;width:500px;" cellpadding="0" cellspacing="0" id="tb1">
<tbody>
<tr>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;" >sequence</th>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;">name</th>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;">ID</th>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;">position</th>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;">gender</th>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;">work</th>
<th style="font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;">arrival</th>
</tr>
<tr>
<td>1</td>
<td>Andy Lau</td>
<td>8008</td>
<td>CEO</td>
<td>Men</td>
<td>98</td>
<td>2008-04-12</td>
</tr>
<tr>
<td>2</td>
<td>Qi Long</td>
<td>8004</td>
<td>Manager</td>
<td>Men</td>
<td>80</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>3</td>
<td>Lian Guang</td>
<td>8003</td>
<td>Manager</td>
<td>Men</td>
<td>85</td>
<td>2008-04-15</td>
</tr>
<tr>
<td>4</td>
<td>Xue You</td>
<td>8009</td>
<td>ViceCEO</td>
<td>Men</td>
<td>90</td>
<td>2008-04-11</td>
</tr>
<tr>
<td>5</td>
<td>Bozhi</td>
<td>8005</td>
<td>assistant</td>
<td>woman</td>
<td>78</td>
<td>2008-04-13</td>
</tr>
<tr>
<td>6</td>
<td>Edison Chen</td>
<td>8001</td>
<td>CFO</td>
<td>Men</td>
<td>60</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>7</td>
<td>Lin Chen</td>
<td>8002</td>
<td>Probation</td>
<td>woman</td>
<td>85</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>8</td>
<td>Yu Zhang</td>
<td>8007</td>
<td>SeniorManager</td>
<td>woman</td>
<td>82</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>9</td>
<td>Mark Zhou</td>
<td>8006</td>
<td>ViceCEO</td>
<td>Men</td>
<td>88</td>
<td>2008-04-13</td>
</tr>
</tbody>
</table>

<br />

<script language="javascript" type="text/javascript">
function TableSorter(table)
{
	this.Table = this.$(table);
	if(this.Table.rows.length <= 1){
		return;
	}
	this.Init(arguments);
}

TableSorter.prototype.Init = function(args)
{
	this.ViewState = [];
	for(var x = 0; x < this.Table.rows[0].cells.length; x++)
	{
		this.ViewState[x] = false;
	}
	if(args.length > 1)
	{
		for(var x = 1; x < args.length; x++)
		{
			if(args[x] > this.Table.rows[0].cells.length){
				continue;
			}
			else
			{
				this.Table.rows[0].cells[args[x]].onclick = this.GetFunction(this,"Sort",args[x]);
				this.Table.rows[0].cells[args[x]].style.cursor = "pointer";
			}
		}
	}
	else
	{
		for(var x = 0; x < this.Table.rows[0].cells.length; x++)
		{
			this.Table.rows[0].cells[x].onclick = this.GetFunction(this,"Sort",x);
			this.Table.rows[0].cells[x].style.cursor = "pointer";
		}
	}
}

TableSorter.prototype.$ = function(element)
{
	return document.getElementById(element);
}

TableSorter.prototype.GetFunction = function(variable,method,param)
{
	return function()
	{
		variable[method](param);
	}
}

TableSorter.prototype.Sort = function(col)
{
	var SortAsNumber = true;
	for(var x = 0; x < this.Table.rows[0].cells.length; x++){
		this.Table.rows[0].cells[x].className = this.NormalCss;
	}
	var Sorter = [];
	for(var x = 1; x < this.Table.rows.length; x++){
		Sorter[x-1] = [this.Table.rows[x].cells[col].innerHTML, x];
		SortAsNumber = SortAsNumber && this.IsNumeric(Sorter[x-1][0]);
	}
	if(SortAsNumber){
		for(var x = 0; x < Sorter.length; x++){
			for(var y = x + 1; y < Sorter.length; y++){
				if(parseFloat(Sorter[y][0]) < parseFloat(Sorter[x][0])){
					var tmp = Sorter[x];
					Sorter[x] = Sorter[y];
					Sorter[y] = tmp;
				}
			}
		}
	}
	else{
		Sorter.sort();
	}
	if(this.ViewState[col]){
		Sorter.reverse();
		this.ViewState[col] = false;
		this.Table.rows[0].cells[col].className = this.SortDescCss;
	}
	else{
		this.ViewState[col] = true;
		this.Table.rows[0].cells[col].className = this.SortAscCss;
	}
	var Rank = [];
	for(var x = 0; x < Sorter.length; x++){
		Rank[x] = this.GetRowHtml(this.Table.rows[Sorter[x][1]]);
	}
	for(var x = 1; x < this.Table.rows.length; x++){
		for(var y = 0; y < this.Table.rows[x].cells.length; y++){
			this.Table.rows[x].cells[y].innerHTML = Rank[x-1][y];
		}
	}
	this.OnSorted(this.Table.rows[0].cells[col], this.ViewState[col]);
}

TableSorter.prototype.GetRowHtml = function(row){
	var result = [];
	for(var x = 0; x < row.cells.length; x++){
		result[x] = row.cells[x].innerHTML;
	}
	return result;
}

TableSorter.prototype.IsNumeric = function(num){
	return /^\d+(\.\d+)?$/.test(num);
}

TableSorter.prototype.OnSorted = function(cell, IsAsc){
	return;
}
new TableSorter("tb1");
</script>
</body>
</html>