javascript table排序这个更简单了，不用改变现在的表格结构

另外一个table排序，这个更简单了，不用改变现在的表格结构,来自国外的代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>JavaScript实现可自定义排序的表格 - </title><meta http-equiv=Content-Type content="text/html; charset=gb2312"><style type=text/css>BODY { FONT-SIZE: 0.8em; FONT-FAMILY: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif } P { FONT-WEIGHT: bold; MARGIN-BOTTOM: 0px } .tableWidget_headerCell { BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8 } .tableWigdet_headerCellOver { BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8 } .tableWigdet_headerCellDown { BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8 } .tableWidget_headerCell { BORDER-TOP: #ece9d8 2px solid } .tableWigdet_headerCellOver { BORDER-TOP: #ffc83c 2px solid } .tableWidget TBODY .tableWidget_dataRollOver { BACKGROUND-COLOR: #fff } .tableWigdet_headerCellDown { BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #ffc83c 2px solid; BORDER-LEFT: #aca899 1px solid; BACKGROUND-COLOR: #dbd8c5 } .tableWidget TD { PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-TOP: 2px; BORDER-BOTTOM: #eae9e1 1px solid } .tableWidget TBODY { BACKGROUND-COLOR: #fff } .tableWidget { FONT-SIZE: 12px; WIDTH: 400px; FONT-FAMILY: arial } DIV.widget_tableDiv { BORDER-RIGHT: #aca899 1px solid; BORDER-TOP: #aca899 1px solid; OVERFLOW-Y: auto; BORDER-LEFT: #aca899 1px solid; WIDTH: 400px; BORDER-BOTTOM: #aca899 1px solid; HEIGHT: 200px } HTML > BODY DIV.widget_tableDiv { OVERFLOW: hidden; WIDTH: 400px } .tableWidget THEAD { POSITION: relative } .tableWidget THEAD TR { BOTTOM: 0px; POSITION: relative; TOP: 0px } .tableWidget .scrollingContent { OVERFLOW-Y: auto; WIDTH: 100% } </style> <META content="MSHTML 6.00.5730.13" name=GENERATOR></HEAD> <BODY> <DIV class=widget_tableDiv> <TABLE id=myTable> <THEAD> <TR> <TD>Name</TD> <TD>Age</TD> <TD>Position</TD> <TD>Income</TD> <TD>Gender</TD></TR></THEAD> <TBODY class=scrollingContent> <TR> <TD>John</TD> <TD>37</TD> <TD>Managing director</TD> <TD>90.000</TD> <TD>Male</TD></TR> <TR> <TD>Susan</TD> <TD>34</TD> <TD>Partner</TD> <TD>90.000</TD> <TD>Female</TD></TR> <TR> <TD>David</TD> <TD>29</TD> <TD>Head of production</TD> <TD>70.000</TD> <TD>Male</TD></TR> <TR> <TD>Laura</TD> <TD>29</TD> <TD>Head of marketing</TD> <TD>70.000</TD> <TD>Female</TD></TR> <TR> <TD>Kate</TD> <TD>18</TD> <TD>Marketing</TD> <TD>50.000</TD> <TD>Female</TD></TR> <TR> <TD>Mona</TD> <TD>21</TD> <TD>Marketing</TD> <TD>53.000</TD> <TD>Female</TD></TR> <TR> <TD>Mike</TD> <TD>21</TD> <TD>Marketing</TD> <TD>53.000</TD> <TD>Male</TD></TR> <TR> <TD>Mark</TD> <TD>25</TD> <TD>Production</TD> <TD>52.000</TD> <TD>Male</TD></TR> <TR> <TD>Peter</TD> <TD>33</TD> <TD>Production</TD> <TD>55.000</TD> <TD>Male</TD></TR> <TR> <TD>Jennifer</TD> <TD>24</TD> <TD>Production</TD> <TD>49.000</TD> <TD>Female</TD></TR> <TR> <TD>David</TD> <TD>25</TD> <TD>Photography</TD> <TD>51.000</TD> <TD>Male</TD></TR> <TR> <TD>Anna</TD> <TD>42</TD> <TD>Head of photography</TD> <TD>56.000</TD> <TD>Female</TD></TR> <TR> <TD>Rita</TD> <TD>30</TD> <TD>Photography</TD> <TD>54.000</TD> <TD>Female</TD></TR> <TR> <TD>Magnus</TD> <TD>25</TD> <TD>Freelancer</TD> <TD>65.000</TD> <TD>Male</TD></TR> <TR> <TD>Johnny</TD> <TD>29</TD> <TD>Freelancer</TD> <TD>63.000</TD> <TD>Male</TD></TR></TBODY></TABLE></DIV>   </BODY></HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

js使用generator函数同步执行ajax任务
这篇文章主要为大家详细介绍了js使用generator函数同步执行ajax任务，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
JavaScript获取GridView中用户点击控件的行号，列号
GridView中的某几列有按钮，需要获取用户当前点的按钮的行号（捎带的得到列号）
2009-04-04
JavaScript前后端JSON使用方法教程
这篇文章主要给大家介绍了关于JavaScript前后端JSON使用方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
ES6知识点整理之Proxy的应用实例详解
这篇文章主要介绍了ES6知识点整理之Proxy的应用,结合实例形式详细分析了ES6中Proxy的功能、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
2019-04-04
JavaScript 总结几个提高性能知识点(推荐)
下面小编就为大家带来一篇JavaScript 总结几个提高性能知识点(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
JS正则表达式比较常见用法
本文给大家介绍JS正则表达式比较常见用法，涉及到js正则表达式用法相关知识，感兴趣的朋友一起学习吧
2016-01-01
关于微信jssdk实现多图片上传的一点心得分享
这篇文章主要介绍了关于微信jssdk实现多图片上传的一点心得分享,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-12-12
livereload工具实现前端可视化开发【推荐】
本文将介绍一个工具--livereload。这是一款能根据你本地文件(html、css、js)的变化，自动跟踪刷新浏览器的实时刷新工具，有了这个工具，会大大减轻你刷新页面的工作量。下面跟着小编一起来看下吧
2016-12-12
JS中Promise函数then的奥秘探究
then()方法用于指定当前实例状态发生改变时的回调函数。它返回一个新的Promise实例。下面这篇文章主要给大家介绍了关于JS中Promise函数then的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧
2018-07-07
纯js模仿windows系统日历
本文主要介绍了纯js模仿windows系统日历的思路与实现方法。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02