Rumah >hujung hadapan web >tutorial js >基于jquery的表格排序_jquery
很多高手也位jquery写了专门的排序库,因为自己也想尝试一下,
当然运行速度实在不能接受,但是我会慢慢的把他改进的。
注:这里只是拿出了一部分代码来,查看演示demo
文档载入后给'th'添加click事件。
1.
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr('dataType');
找到点击对象的自定义属性dataType,当然这个不符合W3C的标准是无法通过检验的,也可以用ID或者class来定义,但是我觉得这样直观点在Transitional模式下也可以正常解读.
2.
var index=$('th').index(this)+1;
找到被点击对象在文档中的位置加上1,加1是为了给所对应的列的td添加样式才做的。
因为用:eq()只能得到td的全文档位置,而用:nth-child()的话得到的是每个td在自己的父元素里面的序列位置。
3.
var row=$('tbody tr');
将tbody里所有tr存到变量row.
4.
$.each(row,function(i){ arr[i]=row[i] })
遍历所有行讲它插入arr数组.
5.if($(this).hasClass('select')){arr.reverse()}
如果这个'th'被点击过那么它将会被添加select样式,如果是这样直接将原来的arr数组反向。
6.
else {
arr.sort(sortStr(index,dataType))
$('.select').removeClass();
$('td:nth-child('+index+')').addClass('select');
$(this).addClass('select')
}
否则,将arr用sort()方法进行排序sort()方式可以接受1个函数,这个函数接受2个参数作为需要比较的数据,我在这里定义为
sortStr();
它有两个参数:
房号 | 日期 | 房间类型 | 床位 | 容量 | 价格/晚 | 合计 |
---|---|---|---|---|---|---|
u0628 | 9/14/2008 | Std Hotel Room 2 Double (27 left) | 2 | 4 人 | $109.00 | $436.00 |
u0631 | 10/4/2008 | Lodge Rm/Shared Bath Q (4 left) | 1 | 2 人 | $109.00 | $436.00 |
u0636 | 9/18/2008 | Std Hotel Room Q (34 left) | 1 | 2 人 | $117.00 | $466.00 |
u0638 | 9/19/2008 | Std Hotel Room 2 Q (28 left) | 2 | 4 人 | $117.00 | $466.00 |
u0612 | 9/1/2008 | Studio Condo (10 left) | 1 | 4 人 | $149.00 | $596.00 |
u0626 | 9/13/2008 | Hotel Jr Suite K (4 left) | 1 | 2 人 | $149.00 | $596.00 |
u0641 | 9/22/2008 | Hotel Superior K (26 left) | 1 | 2 人 | $149.00 | $596.00 |
u0602 | 8/31/2008 | 1 Bdrm Condo K (96 left) | 1 | 4 人 | $169.00 | $676.00 |
u0616 | 10/8/2008 | Studio Condo Murphy (5 left) | NaN | 4 人 | $169.00 | $676.00 |
u0623 | 10/2/2008 | Studio Cabin Q (6 left) | 1 | 2 人 | $169.00 | $676.00 |
u0633 | 9/16/2008 | Studio Q/Murphy (6 left) | 2 | 4 人 | $169.00 | $676.00 |
u0637 | 10/5/2008 | Lodge Room Q (4 left) | 1 | 2 人 | $169.00 | $676.00 |
u0622 | 9/11/2008 | Hotel Loft Ste K/Q (3 left) | 2 | 4 人 | $179.00 | $716.00 |
u0629 | 10/10/2008 | 1 Bdrm Condo K (76 left) | 1 | 4 人 | $179.00 | $716.00 |
u0603 | 9/8/2008 | Hotel Loft K/Q (16 left) | 2 | 4 人 | $189.00 | $756.00 |
u0632 | 9/15/2008 | Hotel Loft K/2T (15 left) | 3 | 4 人 | $189.00 | $756.00 |
u0619 | 10/1/2008 | Studio Cabin Firepl K (6 left) | 1 | 2 人 | $209.00 | $836.00 |
u0608 | 10/7/2008 | 1 Bdrm Condo with Den K (1 left) | 1 | 6 人 | $222.00 | $886.00 |
u0620 | 9/5/2008 | 2 Bdrm Condo K/K (25 left) | 2 | 6 人 | $229.00 | $916.00 |
u0630 | 9/7/2008 | 2 Bdrm Condo K/2T (57 left) | 3 | 6 人 | $229.00 | $916.00 |
u0634 | 10/11/2008 | 2 Bdrm Condo K/Q (88 left) | 2 | 6 人 | $229.00 | $916.00 |
u0639 | 9/20/2008 | 1 Bdrm K/Murphy (19 left) | 2 | 4 人 | $229.00 | $916.00 |
u0614 | 9/2/2008 | 2 Bdrm Townhome (7 left) | 2 | 4 人 | $239.00 | $956.00 |
u0610 | 9/10/2008 | 1 Bdrm Loft K/Q+2T/Murphy (5 left) | 5 | 8 人 | $269.00 | $1076.00 |
u0625 | 9/12/2008 | 2 Bdrm K/Q/Murphy (6 left) | 3 | 6 人 | $269.00 | $1076.00 |
u0640 | 9/21/2008 | Exec. 2 Bdrm K/2Q/Murphy (2 left) | 4 | 8 人 | $269.00 | $1076.00 |
u0606 | 9/26/2008 | 2 Bdrm Cabin K/Q+T (2 left) | 3 | 5 人 | $279.00 | $1116.00 |
u0613 | 9/29/2008 | Lodge 2 Bdrm Suite Q/Q (1 left) | 2 | 4 人 | $279.00 | $1116.00 |
u0624 | 10/3/2008 | 1 Bdrm Cabin Firepl K (3 left) | 1 | 4 人 | $279.00 | $1116.00 |
u0618 | 9/4/2008 | 2 Bdrm Condo w/Den Custom (1 left) | 2 | 6 人 | $329.00 | $1316.00 |
u0627 | 10/9/2008 | 3 Bdrm Condo K/Q/Q (6 left) | 3 | 8 人 | $339.00 | $1356.00 |
u0642 | 9/23/2008 | 2 Bdrm Cabin Firepl K/Q+T (1 left) | 3 | 7 人 | $339.00 | $1356.00 |
u0615 | 9/3/2008 | 3 Bdrm Condo K/Q/2T (2 left) | 4 | 8 人 | $379.00 | $1516.00 |
u0607 | 9/9/2008 | 2 Bdrm. Loft K/Q/Q,3T/SS (9 left) | 6 | 11 人 | $389.00 | $1556.00 |
u0609 | 9/27/2008 | Dlx 1 Bdrm Cabin Firepl K (3 left) | 1 | 4 人 | $389.00 | $1556.00 |
u0635 | 9/17/2008 | Exec 2 Bdrm Lft K/K/2Q/SS (1 left) | 4 | 10 人 | $399.00 | $1596.00 |
u0621 | 9/6/2008 | 3 Bdrm Townhome (3 left) | 3 | 6 人 | $409.00 | $1636.00 |
u0601 | 9/24/2008 | 3 Bdrm Cabin K/Q+T/2T (1 left) | 5 | 9 人 | $469.00 | $1876.00 |
u0605 | 9/25/2008 | Dlx 1Bd Loft,K,Q/T firepl (1 left) | 3 | 6 人 | $469.00 | $1876.00 |
u0611 | 9/28/2008 | Dlx 2 Bdm Cbn Firepl K/2T (3 left) | 2 | 6 人 | $469.00 | $1876.00 |
u0604 | 10/6/2008 | Deluxe 3 Bdrm Condo K/Q/Q (2 left) | 3 | 8 人 | $499.00 | $1996.00 |
u0617 | 9/30/2008 | Dlx3Bdm/2Bth/FP/K/QT/QT (1 left) | 5 | 8 人 | $549.00 | $2196.00 |