Javascript进行简单的Table点击排序

闲着没事,随便写了个简单的Table排序的js,大家有兴趣的看看,有需要的就拿去吧.废话不说了,大家看代码吧

<!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 http://www.dwww.cn</title>
<style type="text/css">
body{font-size:12px;line-height:25px;}
tr{height:25px;}
th{font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;}
td{font-size:12px;text-align:center;}
.SortDescCss{background-image:url(http://k2046.cn/tb/Desc.gif);background-repeat:no-repeat;background-position:right center;}
.SortAscCss{background-image:url(http://k2046.cn/tb/Asc.gif);background-repeat:no-repeat;background-position:right center;}
</style>
<script language="javascript" type="text/javascript">
//Author : 狼Robot
//Contact : robot@k2046.cn
//Date : 2008-04-19
//Explain : 使Table可以点击排序.
/*使用说明 :
方法1:
new TableSorter("tb1");
效果:
id为tb1的table的第一行任意单元格都可以点击进行排序.
方法2:
new TableSorter("tb1", 0, 1, 3);
效果:
id为tb1的table的第一行0,1,3单元格可以进行点击排序.
*/
function TableSorter(table)
{
this.Table = this.(table);
if(this.Table.rows.length <= 1)
{
return;
}
this.Init(arguments);
}
//以下样式针对表头的单元格.
TableSorter.prototype.NormalCss = "NormalCss";//没有执行排序时的样式.
TableSorter.prototype.SortAscCss = "SortAscCss";//升序排序时的样式.
TableSorter.prototype.SortDescCss = "SortDescCss";//降序排序时的样式.
//初始化table的信息和操作.
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";
}
}
}
//简写document.getElementById方法.
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;
}

</script>
</head>
<body>
代码:new TableSorter("tb1");<br />
效果:点击任意表头可执行排序.<br />
<table border="0" style="border:solid 1px #DDDDDD;width:360px;" cellpadding="0" cellspacing="0" id="tb1">
<tr>
<th>序号</th>
<th>姓名</th>
<th>工号</th>
<th>职位</th>
<th>性别</th>
<th>业绩</th>
<th>报到时间</th>
</tr>
<tr>
<td>1</td>
<td>刘德华</td>
<td>8008</td>
<td>总裁</td>
<td>男</td>
<td>98</td>
<td>2008-04-12</td>
</tr>
<tr>
<td>2</td>
<td>吴奇隆</td>
<td>8004</td>
<td>主管</td>
<td>男</td>
<td>80</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>3</td>
<td>王光良</td>
<td>8003</td>
<td>经理</td>
<td>男</td>
<td>85</td>
<td>2008-04-15</td>
</tr>
<tr>
<td>4</td>
<td>张学友</td>
<td>8009</td>
<td>副总裁</td>
<td>男</td>
<td>90</td>
<td>2008-04-11</td>
</tr>
<tr>
<td>5</td>
<td>张柏芝</td>
<td>8005</td>
<td>助理</td>
<td>女</td>
<td>78</td>
<td>2008-04-13</td>
</tr>
<tr>
<td>6</td>
<td>陈冠希</td>
<td>8001</td>
<td>总监</td>
<td>男</td>
<td>60</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>7</td>
<td>陈慧琳</td>
<td>8002</td>
<td>试用期</td>
<td>女</td>
<td>85</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>8</td>
<td>张曼玉</td>
<td>8007</td>
<td>高级经理</td>
<td>女</td>
<td>82</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>9</td>
<td>周润发</td>
<td>8006</td>
<td>副总裁</td>
<td>男</td>
<td>88</td>
<td>2008-04-13</td>
</tr>
</table>
<br />
代码:new TableSorter("tb2", 0, 2, 5, 6);<br />
效果:点击表头0,2,5,6列可执行排序.<br />
<table border="0" style="border:solid 1px #DDDDDD;width:360px;" cellpadding="0" cellspacing="0" id="tb2">
<tr>
<th>序号</th>
<th>姓名</th>
<th>工号</th>
<th>职位</th>
<th>性别</th>
<th>业绩</th>
<th>报到时间</th>
</tr>
<tr>
<td>1</td>
<td>刘德华</td>
<td>8008</td>
<td>总裁</td>
<td>男</td>
<td>98</td>
<td>2008-04-12</td>
</tr>
<tr>
<td>2</td>
<td>吴奇隆</td>
<td>8004</td>
<td>主管</td>
<td>男</td>
<td>80</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>3</td>
<td>王光良</td>
<td>8003</td>
<td>经理</td>
<td>男</td>
<td>85</td>
<td>2008-04-15</td>
</tr>
<tr>
<td>4</td>
<td>张学友</td>
<td>8009</td>
<td>副总裁</td>
<td>男</td>
<td>90</td>
<td>2008-04-11</td>
</tr>
<tr>
<td>5</td>
<td>张柏芝</td>
<td>8005</td>
<td>助理</td>
<td>女</td>
<td>78</td>
<td>2008-04-13</td>
</tr>
<tr>
<td>6</td>
<td>陈冠希</td>
<td>8001</td>
<td>总监</td>
<td>男</td>
<td>60</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>7</td>
<td>陈慧琳</td>
<td>8002</td>
<td>试用期</td>
<td>女</td>
<td>85</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>8</td>
<td>张曼玉</td>
<td>8007</td>
<td>高级经理</td>
<td>女</td>
<td>82</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>9</td>
<td>周润发</td>
<td>8006</td>
<td>副总裁</td>
<td>男</td>
<td>88</td>
<td>2008-04-13</td>
</tr>
</table>
<br /><br />
代码:new TableSorter("tb3").OnSorted = function(c, t)<br />
{<br />
alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc"));<br />
}<br />
效果:点击任意表头可执行排序并返回提示.<br />
<table border="0" style="border:solid 1px #DDDDDD;width:360px;" cellpadding="0" cellspacing="0" id="tb3">
<tr>
<th>序号</th>
<th>姓名</th>
<th>工号</th>
<th>职位</th>
<th>性别</th>
<th>业绩</th>
<th>报到时间</th>
</tr>
<tr>
<td>1</td>
<td>刘德华</td>
<td>8008</td>
<td>总裁</td>
<td>男</td>
<td>98</td>
<td>2008-04-12</td>
</tr>
<tr>
<td>2</td>
<td>吴奇隆</td>
<td>8004</td>
<td>主管</td>
<td>男</td>
<td>80</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>3</td>
<td>王光良</td>
<td>8003</td>
<td>经理</td>
<td>男</td>
<td>85</td>
<td>2008-04-15</td>
</tr>
<tr>
<td>4</td>
<td>张学友</td>
<td>8009</td>
<td>副总裁</td>
<td>男</td>
<td>90</td>
<td>2008-04-11</td>
</tr>
<tr>
<td>5</td>
<td>张柏芝</td>
<td>8005</td>
<td>助理</td>
<td>女</td>
<td>78</td>
<td>2008-04-13</td>
</tr>
<tr>
<td>6</td>
<td>陈冠希</td>
<td>8001</td>
<td>总监</td>
<td>男</td>
<td>60</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>7</td>
<td>陈慧琳</td>
<td>8002</td>
<td>试用期</td>
<td>女</td>
<td>85</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>8</td>
<td>张曼玉</td>
<td>8007</td>
<td>高级经理</td>
<td>女</td>
<td>82</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>9</td>
<td>周润发</td>
<td>8006</td>
<td>副总裁</td>
<td>男</td>
<td>88</td>
<td>2008-04-13</td>
</tr>
</table>
<br />
<script language="javascript" type="text/javascript">
new TableSorter("tb1");
new TableSorter("tb2", 0, 2 , 5, 6);
new TableSorter("tb3").OnSorted = function(c, t)
{
alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc"));
}
</script>
</body>
</html>

时间： 2024-09-18 17:18:09

Javascript进行简单的Table点击排序的相关文章

javascript 实现简单的table排序及table操作练习_javascript技巧

在这个列子中,练习了table的操作,主要有:tBodies.rows.cells,还有有关数组的排序方法:sort 先上代码: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>table排序</title> </head> <body> <table id="tableTest&q

javascript 通用简单的table选项卡实现_javascript技巧

第一步:引用table.js 复制代码 代码如下: <script type="text/javascript" src="table.js"> </script> 第二步:定义选中的样式,比如"active",应用选项卡的块的ID,比如"sidebar",默认被选中的序号,比如第一个"0": 第三步:调用函数: 复制代码 代码如下: <script type="te

JavaScript实现表格点击排序的方法

  这篇文章主要介绍了JavaScript实现表格点击排序的方法,可实现点击顶部数据项标题实现对应数据列的排序效果,涉及javascript鼠标事件及数据排序的技巧,需要的朋友可以参考下 这里实现基于JS的表格点击排序效果,可以根据表格内的数据大小自动按顺序排列,股票网站常会见到这种功能. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

JS实现table表格数据排序功能(可支持动态数据+分页效果)_javascript技巧

asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点. 下面把html的代码贴出来: <!DOCTYPE HTML

javascript实现简单的二级联动

 这篇文章主要介绍了javascript实现简单的二级联动,非常的实用,需要的朋友可以参考下     二级联动在一般的网页中随处可见,一般是地址,比如点击浙江省,随后出现的是杭州市,嘉兴市:点击北京省出现的是朝阳,海淀,而不是出现杭州,嘉兴. 要想实现这个步骤,就要用到javascript来实现.其中原理用到onchange时间. 首先,onchange 事件会在域的内容改变时发生.支持该事件的 JavaScript 对象:fileUpload, select, text, textarea,我

JavaScript实现简单的日历效果_javascript技巧

只是个简单的日历模板,各位可根据需要自行添加需要的功能.该模板更多的是提供了关于年.月.日.月初.月末.星期的获取函数.各位可根据需要自行获取.欢迎提供更简便的方式方法,互相学习提高!谢谢~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日历</title> <style type="

Javascript闭包简单理解

原文:Javascript闭包简单理解 提到闭包,想必大家都早有耳闻,下面说下我的简单理解.说实话平时工作中实际手动写闭包的场景并不多,但是项目中用到的第三方框架和组件或多或少用到了闭包.所以,了解闭包是非常必要的.呵呵... 一.什么是闭包简而言之,就是能够读取其他函数内部变量的函数.由于JS变量作用域的特性,外部不能访问内部变量,内部可以外部变量. 二.使用场景1. 实现私有成员.2. 保护命名空间,避免污染全局变量.3. 缓存变量. 先看一个封装的例子: var person = func

JavaScript实现简单的tab选项卡切换_javascript技巧

本文实例讲解了JavaScript实现简单的tab选项卡切换的示例代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table切换</title> <style type="text/css"> *{ paddi

JavaScript获取表格（table）当前行的值、删除行、增加行_javascript技巧

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Js获取 table当前行的值</title> <script language=javascript> var selectedTr = null; function c1(obj) { obj.style.back