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

程序员文章站 2022-04-25 14:58:08

...

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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