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

272 阅读 0 评论 180 点赞

我是靠谱客的博主粗心胡萝卜，最近开发中收集的这篇文章主要介绍javascript 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需刷新才能执行]