Home >Web Front-end >JS Tutorial >javascript table sorting This is simpler, no need to change the current table structure_javascript skills

javascript table sorting This is simpler, no need to change the current table structure_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 18:28:511040browse

<title>JavaScript implements customizable sorting table - </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">

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript editor and code formatting on web pages_javascript tipsNext article：Javascript editor and code formatting on web pages_javascript tips

See more

javascript table sorting This is simpler, no need to change the current table structure_javascript skills

Related articles