<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格排序</title>
<script type="text/javascript" src="tableListSort.js">
</script>
<script type="text/javascript">
//
window.onload=function(){
//自定义添加class 如果不打算添加 此属性可以为不设置。
//table.Index为上一次被排序过的坐标值;table.Index初始化为null;
//fn:fini函数仅为排序过后需要执行的函数，就算没有它也是可以排序的
//这里传递一个排序过后需要执行的函数仅仅是为了添加排序down和up的标示图标
function fini(num){
table.th[num].className=
table.th[num].className=='selectUp'?
'selectDown':'selectUp';//切换标示图标
each(table.Row,function(o){//highLight高亮当前排序的列
o.cells[num].className='highLight';
if(table.Index!=null&&table.Index!=num){
o.cells[table.Index].className='';
}
});
if(table.Index!=null&&table.Index!=num){//另外的被点击 原先的被取消表示图标
table.th[table.Index].className='';
}
}
var table=new tableListSort($('tb'),{data:8,fileType:9,fn:fini})//文档载入后new传递参数
}
</script>
<style type="text/css">
table#tb {
text-align:center;
border:1px #ccc solid;
border-collapse:collapse;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#666;
width:900px;
background:url(room-bg.gif) 0 -13px repeat-x ;
}
table#tb td {
border-bottom:#ccc 1px solid;
padding:.3em 0 .3em 0;
}
#tb th {
height:30px;
color:#009;
padding-right:16px;
}
#tb thead tr{
}
#tb td.highLight{color:#000;}
#tb th.selectUp {
background:url(up1.png) no-repeat right center transparent ;
}
#tb th.selectDown {
background:url(down1.png) no-repeat right center transparent ;
}
#tb tfoot{
font-weight:bold;
color:#06F;
background:url(room-bg.gif) 0 -13px repeat-x ;
}
</style>
</head>
<body>
<table id="tb">
<caption>排序</caption>
<thead>
<tr>
<th>number</th>
<th>date</th>
<th>letter and number</th>
<th>digit</th>
<th>容量</th>
<th>price</th>
<th>price total</th>
<th>产品</th>
<th>数据大小</th>
<th>文件类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>u0628</td>
<td>9/14/2008</td>
<td>Std Hotel Room 2 Double (27 left)</td>
<td>2</td>
<td>4 人</td>
<td>$109.00</td>
<td>￥436.00</td>
<td>衣服1-2</td>
<td>1KB</td>
<td>new.exe</td>
</tr>
<tr >
<td>u0631</td>
<td>10/4/2008</td>
<td>Lodge Rm/Shared Bath Q (4 left)</td>
<td>15</td>
<td>2 人</td>
<td>$109.00</td>
<td>￥436.00</td>
<td>衣服1-1</td>
<td>40.5KB</td>
<td>123.exe</td>
</tr>
<tr >
<td >u0636</td>
<td >9/18/2008</td>
<td >Std Hotel Room Q (34 left)</td>
<td >1</td>
<td >2 人</td>
<td >$117.00</td>
<td >￥466.00</td>
<td>衣服1-3</td>
<td>1.1KB</td>
<td>压缩包.rar</td>
</tr>
<tr >
<td>u0638</td>
<td >9/19/2008</td>
<td >Std Hotel Room 2 Q (28 left)</td>
<td >2</td>
<td >4 人</td>
<td >$117.00</td>
<td>￥466.00</td>
<td>衣服1-6</td>
<td>100.3KB</td>
<td>17173.rar</td>
</tr>
<tr >
<td>u0612</td>
<td >9/1/2008</td>
<td >Studio Condo (10 left)</td>
<td >1</td>
<td >4 人</td>
<td >$149.00</td>
<td>￥596.00</td>
<td>衣服1-5</td>
<td>1.7KB</td>
<td>4589.txt</td>
</tr>
<tr >
<td>u0626</td>
<td >9/13/2008</td>
<td >Hotel Jr Suite K (4 left)</td>
<td >1</td>
<td >2 人</td>
<td >$149.00</td>
<td>￥596.00</td>
<td>衣服1-4</td>
<td>350.8KB</td>
<td>17173.html</td>
</tr>
<tr >
<td>u0641</td>
<td >9/22/2008</td>
<td >Hotel Superior K (26 left)</td>
<td >1</td>
<td >2 人</td>
<td >$149.00</td>
<td>￥596.00</td>
<td>袜子1-2</td>
<td>1.4KB</td>
<td>首页.html</td>
</tr>
<tr >
<td>u0602</td>
<td >8/31/2008</td>
<td >1 Bdrm Condo K (96 left)</td>
<td >1</td>
<td >4 人</td>
<td >$169.00</td>
<td>￥676.00</td>
<td>袜子1-6</td>
<td>1.2KB</td>
<td>歌曲.mp3</td>
</tr>
<tr >
<td>u0616</td>
<td >10/8/2008</td>
<td >Studio Condo Murphy (5 left)</td>
<td >NaN</td>
<td >4 人</td>
<td >$169.00</td>
<td>￥676.00</td>
<td>袜子1-9</td>
<td>1.1KB</td>
<td>歌曲.mp4</td>
</tr>
<tr >
<td>u0623</td>
<td >10/2/2008</td>
<td >Studio Cabin Q (6 left)</td>
<td >1</td>
<td >2 人</td>
<td >$169.00</td>
<td>￥676.00</td>
<td>袜子1-22</td>
<td>1024KB</td>
<td>歌曲10.mp4</td>
</tr>
<tr >
<td>u0633</td>
<td >9/16/2008</td>
<td >Studio Q/Murphy (6 left)</td>
<td >2</td>
<td >4 人</td>
<td >$169.00</td>
<td>￥676.00</td>
<td>袜子2-2</td>
<td>1.8MB</td>
<td>王者归来.png</td>
</tr>
<tr >
<td>u0637</td>
<td >10/5/2008</td>
<td >Lodge Room Q (4 left)</td>
<td >1</td>
<td >2 人</td>
<td >$169.00</td>
<td>￥676.00</td>
<td>袜子3-2</td>
<td>1.4MB</td>
<td>刘德华.mp3</td>
</tr>
<tr >
<td>u0622</td>
<td >9/11/2008</td>
<td >Hotel Loft Ste K/Q (3 left)</td>
<td >2</td>
<td >4 人</td>
<td >$179.00</td>
<td>￥716.00</td>
<td>裤子3-2</td>
<td>1.6MB</td>
<td>function.js</td>
</tr>
<tr >
<td>u0629</td>
<td >10/10/2008</td>
<td >1 Bdrm Condo K (76 left)</td>
<td >1</td>
<td >4 人</td>
<td >$179.00</td>
<td>￥716.00</td>
<td>裤子3-4</td>
<td>1.2MB</td>
<td>c#.cs</td>
</tr>
<tr >
<td>u0603</td>
<td >9/8/2008</td>
<td >Hotel Loft K/Q (16 left)</td>
<td >2</td>
<td >4 人</td>
<td >$189.00</td>
<td>￥756.00</td>
<td>袜子1-20</td>
<td>1.1MB</td>
<td>asp.net-c#.cs</td>
</tr>
<tr >
<td>u0632</td>
<td >9/15/2008</td>
<td >Hotel Loft K/2T (15 left)</td>
<td >3</td>
<td >4 人</td>
<td >$189.00</td>
<td>￥756.00</td>
<td>衣服1-22</td>
<td>1.6MB</td>
<td>c#-asp.net.cs</td>
</tr>
<tr >
<td>u0619</td>
<td >10/1/2008</td>
<td >Studio Cabin Firepl K (6 left)</td>
<td >1</td>
<td >2 人</td>
<td >$209.00</td>
<td>￥836.00</td>
<td>衣服1-23</td>
<td>1.5MB</td>
<td>jquery.1.3.min.js</td>
</tr>
<tr >
<td>u0608</td>
<td >10/7/2008</td>
<td >1 Bdrm Condo with Den K (1 left)</td>
<td >1</td>
<td >6 人</td>
<td >$222.00</td>
<td>￥886.00</td>
<td>靴子4-22</td>
<td>1.9MB</td>
<td>jquery.1.26.min.txt</td>
</tr>
<tr >
<td>u0620</td>
<td >9/5/2008</td>
<td >2 Bdrm Condo K/K (25 left)</td>
<td >2</td>
<td >6 人</td>
<td >$229.00</td>
<td>￥916.00</td>
<td>衣服1-17</td>
<td>1.42MB</td>
<td>jquery.1.31.min.js</td>
</tr>
<tr >
<td>u0630</td>
<td >9/7/2008</td>
<td >2 Bdr
