javascript 테이블 정렬 이것은 더 간단합니다. 현재 테이블 구조를 변경할 필요가 없습니다._javascript 기술

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