JavaScript 实现的客户端表格排序

最新推荐文章于 2024-10-27 12:35:43 发布

Eric6

最新推荐文章于 2024-10-27 12:35:43 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： javascript function date xhtml 文档数据结构

本文链接：https://blog.youkuaiyun.com/Eric6/article/details/5794268

版权

web前端专栏收录该内容

10 篇文章

订阅专栏

Javascript 表格排序, 参考至《JavaScript高级程序设计》一书, 点击表头即可进行排序, 再次点击反向排序, 对字符串格式的第一次为正向排序, 对整型, 浮点型以及日期型的格式第一次点击为逆向排序, 这样更符合人们的习惯, 还对特殊的数据结构(这里是图片)进行了排序, 是通过设置td 的value 属性并对其值进行排序实现的, 效果如下:

<!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>js - 表格排序</title> <mce:script type="text/javascript"></mce:script> </head> <body> <table id="sortTable" border="1" cellspacing="0px" cellpadding="5px"> <thead> <tr> <th οnclick="sortTable('sortTable', 0)" style="cursor: pointer;" mce_style="cursor: pointer;">电影名称</th> <th οnclick="sortTable('sortTable', 1, 'date')" style="cursor: pointer;" mce_style="cursor: pointer;">上传日期</th> <th οnclick="sortTable('sortTable', 2, 'float')" style="cursor: pointer;" mce_style="cursor: pointer;">文件大小</th> <th οnclick="sortTable('sortTable', 3, 'int')" style="cursor: pointer;" mce_style="cursor: pointer;">下载次数</th> <th οnclick="sortTable('sortTable', 4)" style="cursor: pointer;" mce_style="cursor: pointer;">文件类型</th> </tr> </thead> <tbody> <tr> <td>猜火车</td> <td>6-8-2009</td> <td>789.5MB</td> <td>564</td> <td value="rmvb"><img src="rmvb.gif" mce_src="rmvb.gif" alt="" /></td> </tr> <tr> <td>Love Actually</td> <td>6/20/2009</td> <td>1065.2MB</td> <td>864</td> <td value="avi"><img src="avi.jpg" mce_src="avi.jpg" alt="" /></td> </tr> <tr> <td>四个婚礼和一个葬礼</td> <td>1/1/1999</td> <td>789.8MB</td> <td>784</td> <td value="rmvb"><img src="rmvb.gif" mce_src="rmvb.gif" alt="" /></td> </tr> <tr> <td>诺丁山</td> <td>5-23-2008</td> <td>4812.8MB</td> <td>1064</td> <td value="swf"><img src="swf.png" mce_src="swf.png" alt="" /></td> </tr> <tr> <td>Titanic</td> <td>6-8-2008</td> <td>2058.6MB</td> <td>1264</td> <td value="avi"><img src="avi.jpg" mce_src="avi.jpg" alt="" /></td> </tr> <tr> <td>BJ 单身日记</td> <td>12/24/2004</td> <td>402MB</td> <td>484</td> <td value="rar"><img src="rar.gif" mce_src="rar.gif" alt="" /></td> </tr> </tbody> </table> </body> </html>