<!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>表格排序插件blueTable Demo by http://www.codefans.net</title>
<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="blueTable.js" charset="utf-8"></script>
<script type='text/javascript'>
function loaded(){
var $tb =$('#tb')
$tb.blueTable({
SelectRowOrder:{index:10},//设置选中行排序坐标
DataSize:{index:8},//设置数据大小排序坐标
ExtensionName:{index:9,extension:'extension',name:'name',strongClass:'ext'},
NotOrder:[],//过滤不需要排序的列
HighLightColClass:'highlight'
},finish)
.find('tbody tr').hover(function(){$(this).addClass('over');},
function(){$(this).removeClass('over');})
.find('input').bind('click',function(){
$(this).parent().parent().toggleClass('select');
this.src = this.checked?'checked.png':'checkbox.png';
});
function finish(CurrentIndex,BeforeIndex){
//排序完成之后需要执行的函数 可以收到一个对象作为参数，前一次排序的对象排序列坐标和当前被排序列坐标
var th = $tb.find('th:eq('+CurrentIndex+')'),
th1 = $tb.find('th:eq('+BeforeIndex+')');
th.hasClass('up')?th.removeClass('up').addClass('down'):
th.removeClass('down').addClass('up');
(BeforeIndex!=CurrentIndex)&&th1.removeClass();
}
}
$(loaded);
</script>
<style type="text/css">
#tb{
background:url(room-bg.gif) transparent repeat-x 0 -13px;
table-layout:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border:1px #CCC solid;
text-align:center;
border-collapse:collapse;
width:950px;
cursor:default;
}
#tb th{
padding:5px;
color:#03C;
padding: .6em;
}
#tb th.up{
background:transparent url(up.png) no-repeat center 3px
}
#tb th.down{
background:transparent url(down.png) no-repeat center 3px
}
#tb tbody tr.select{background:#EFe}
#tb tbody tr.select td{color:#900;border-bottom-color:#0CC}
#tb tbody tr.over{background:#EFF}
#tb tbody tr.over td{color:#03c}
#tb td{
border-bottom:1px #ccc solid;
border-top:1px #ccc solid;
padding:.2em;
color:#000;
}
#tb td.highlight{color:#03c}
#tb span {padding:.2em}
#tb colgroup col {
background-image:none;/*IE下的colgroup会继承table的背景设置 所以这里设置none*/
}
#tb colgroup col.c2{text-align:right;}
#tb td+td+td+td+td+td+td+td+td{text-align:right;}
#tb td:last-child {text-align:center } /*发现IE7并不支持last:child 倒是支持first:child*/
#tb input {cursor:pointer}
</style>
</head>
<body>
<div id="time"></div>
<table id="tb" class="tb2">
<caption>blueTable</caption>
<colgroup><col class="cc" /><col /><col /><col /><col /><col /><col /><col />
<col class="c2" /><col class="c2" /><col />
</colgroup>
<thead>
<tr>
<th>number</th>
<th>date</th>
<th>letter and number</th>
<th>digit</th>
<th>contains</th>
<th>price</th>
<th>price total</th>
<th>case</th>
<th>dataSize</th>
<th><span ID='name'>name</span>/<span ID='extension'>type</span></th>
<th>behavior</th>
</tr>
</thead>
<tbody>
<tr class="a">
<td>u0628</td>
<td>9/14/2008</td>
<td>Std Hotel Room 2 Double (27 left)</td>
<td>5</td>
<td>4 人</td>
<td>$109.00</td>
<td>￥436.00</td>
<td>衣服1-2</td>
<td>0.9gb</td>
<td>new.exe</td>
<td><input type='image' src='checkbox.png' /></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>1KB</td>
<td>123.exe</td>
<td><input type='image' src='checkbox.png' /></td>
</tr>
<tr >
<td >u0636</td>
<td >3/18/2008</td>
<td >Std Hotel Room Q (34 left)</td>
<td >7</td>
<td >2 人</td>
<td >$117.00</td>
<td >￥466.00</td>
<td>衣服1-3</td>
<td>1.1kb</td>
<td>压缩包.rar</td>
<td><input type='image' src='checkbox.png' /></td>
</tr>
<tr >
<td>u0638</td>
<td >9/19/2008</td>
<td >Std Hotel Room 2 Q (28 left)</td>
<td >6</td>
<td >4 人</td>
<td >$117.00</td>
<td>￥466.00</td>
<td>衣服1-6</td>
<td>100.3KB</td>
<td>17173.rar</td>
<td><input type='image' src='checkbox.png' /></td>
</tr>
<tr >
<td>u0612</td>
<td >9/1/2008</td>
<td >Studio Condo (10 left)</td>
<td >5</td>
<td >4 人</td>
<td >$149.00</td>
<td>￥596.00</td>
<td>衣服1-5</td>
<td>1.7KB</td>
<td>4589.txt</td>
<td><input type='image' src='checkbox.png' /></td>
</tr>
<tr >
<td>u0626</td>
<td >9/13/2008</td>
<td >Hotel Jr Suite K (4 left)</td>
<td >4</td>
<td >2 人</td>
<td >$149.00</td>
<td>￥596.00</td>
<td>衣服1-4</td>
<td>350.8KB</td>
<td>17173.html</td>
<td><input type='image' src='checkbox.png' /></td>
</tr>
<tr >
<td>u0641</td>
<td >9/22/2008</td>
<td >Hotel Superior K (26 left)</td>
<td >3</td>
<td >2 人</td>
<td >$149.00</td>
<td>￥596.00</td>
<td>袜子1-2</td>
<td>1.4KB</td>
<td>1.html</td>
<td><input type='image' src='checkbox.png' /></td>
</tr>
<tr >
<td>u0602</td>
<td >8/31/2008</td>
<td >1 Bdrm Condo K (96 left)</td>
<td >2</td>
<td >4 人</td>
<td >$169.00</td>
<td>￥676.00</td>
<td>袜子1-6</td>
<td>1.2KB</td>
<td>歌曲.mp3</td>
<td><input type='image' src='checkbox.png' /></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>
<td><input type='image' src='checkbox.png' /></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>
<td><input type='image' src='checkbox.png' /></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>
<td><input type='image' src='checkbox.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>
<td><input type='image' src='checkbox.png' /></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>
<td><input type='image' src='checkbox.png' /></td>
</tr>
<tr >
<td>u0629</td>
<td >10/10/2008</td>
<td >1 Bdrm Condo K (
Blue Table，Js表格排序插件，排序完成之后需要执行的函数 可以收到一个对象作为参数，前一次排序的对象排序列坐标和当前被...
4星 · 超过85%的资源 需积分: 9 17 浏览量
2010-09-20
13:41:59
上传
评论
收藏 42KB RAR 举报 
bluetable.rar （6个子文件） 
codefans.net bluetable 
checked.png 383B
jquery1.2.6.min.js 55KB checkbox.png 399B blueTable.js 8KB jquery.js 56KB index.htm 18KB资源评论
qq4930042013-03-08不错 就是有点占资源
mirage1982
- 粉丝: 59
- 资源: 1049
