JavaScript实现无需修改表格结构的动态排序

JavaScript表格排序实现

<!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>

注意：引入外部JavaScript代码后，需要刷新页面才能执行相关功能。