Jquery对Table表格排序(方法一)


在前端对表格排序的Jquery插件有很多,功能也很强大,比如说Jquery Data Tables对表格的处理就相当强大,可对表格进行排序,搜索,分页等操作,不过没有仔细研究过其实现原理。

      为了更好的理解在前端对表格进行排序的原理,也为了进一步的学习Jquery,所以决定用Jquery来实现一个对表格进行排序的小功能。

      该实现的主要思想是:获取鼠标点击的表头单元格的列号,遍历数据行,获取每个中的html,同时获取每个标签下对应获取到的列号的标签中的内容,并取得标签的type属性值,将获取的html、的内容和的type属性值拼接成字符串添加到数组array中,然后将表格中的html全部置空,根据type属性值的不同采用不同的方法对的内容进行比较,根据比较结果对数组array进行排序,然后将排序后的数组元素重新赋值给已经置空的。如果已经对该列排序过了,则直接对数组进行倒置。

先看效果图:

排序前:

按价格排序后

现在来看实现代码吧:

CSS代码:

 


HTML代码:

序号 书名 价格(元) 出版时间 印刷量(册) IP
1 狼图腾 29.80 2009-10 50000 192.168.1.125
2 孝心不能等待 29.80 2009-09 800 192.68.1.125
3 藏地密码2 28.00 2008-10 192.102.0.12
4 藏地密码1 24.80 2008-10 215.34.126.10
5 设计模式之禅 69.00 2011-12 192.168.1.5
6 轻量级 Java EE 企业应用实战 99.00 2012-04 5000 192.358.1.125
7 Java 开发实战经典 79.80 2012-01 2000 192.168.1.25
8 Java Web 开发实战经典 69.80 2011-11 2500 215.168.54.125


 

Jquery代码部分


 

 

 

你可能感兴趣的:(JQUERY开发,CSS开发)