Tip: you can modify some code before running
China WEB first stop<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>K2046.TableSorterV2</title> <style type="text/css">Body {font-size: 12px; line-height: 25px ;}. table {background-color: # c0c0c0; text-align: center; font-size: 12px ;}. table a {color: #000000; text-decoration: none }. table a: hover {color: # FF0000 ;}. table_th {background-color: # ffffff; line-height: 20px; cursor: pointer; background-image: url (.. /images/thbg.gif); background-repeat: repeat-x }. table_even {background-color: # F3FBFC; height: 18px ;}. table_odd {background-color: # fff; height: 18px ;}. table_over {background-color: # dee7f0; height: 18px ;}. table_down {background-color: # c993ff; height: 18px ;}. sortDescCss {background-image: url(Desc.gif); background-repeat: no-repeat; background-position: right center ;}. sortAscCss {background-image: url(Asc.gif); background-repeat: no-repeat; background-position: right center ;}</style> <script language="javascript" type="text/javascript" >Function TableSorter (table) {this. table = this. $ (table); if (this. table. rows. length <= 1) {return;} var args = []; if (arguments. length> 1) {for (var x = 1; x <arguments. length; x ++) {args. push (arguments [x]) ;}} this. init (args);} TableSorter. prototype = {$: function (element) // abbreviated as document. getElementById {return document. getElementById (element) ;}, Init: function (args) // initialize table information and operations {this. rows = []; This. header = []; this. viewState = []; this. lastSorted = null; this. normalCss = "NormalCss"; this. sortAscCss = "SortAscCss"; this. sortDescCss = "SortDescCss"; for (var x = 0; x <this. table. rows. length; x ++) {this. rows. push (this. table. rows [x]);} this. header = this. rows. shift (). cells; for (var x = 0; x <(args. length? Args. length: this. Header. length); x ++) {var rowIndex = args. length? Args [x]: x; if (rowIndex> = this. header. length) {continue;} this. viewState [rowIndex] = false; this. header [rowIndex]. style. cursor = "pointer"; this. header [rowIndex]. onclick = this. getFunction (this, "Sort", rowIndex) ;}}, GetFunction: function (variable, method, param) // gets the specified method of the specified object. {return function () {variable [method] (param) ;}}, Sort: function (column) // execute sorting. {if (this. lastSorted) {this. lastSort Ed. className = this. normalCss;} var SortAsNumber = true; for (var x = 0; x <this. rows. length & SortAsNumber; x ++) {SortAsNumber = this. isNumeric (this. rows [x]. cells [column]. innerHTML);} this. rows. sort (function (row1, row2) {var result; var value1, value2; value1 = row1.cells [column]. innerHTML; value2 = row2.cells [column]. innerHTML; if (value1 = value2) {return 0;} if (SortAsNumber) {result = ParseFloat (value1)> parseFloat (value2);} else {result = value1> value2;} result = result? 1:-1; return result;}) if (this. viewState [column]) {this. rows. reverse (); this. viewState [column] = false; this. header [column]. className = this. sortDescCss;} else {this. viewState [column] = true; this. header [column]. className = this. sortAscCss;} this. lastSorted = this. header [column]; var frag = document. createDocumentFragment (); for (var x = 0; x <this. rows. length; x ++) {frag. appendChild (this. Rows [x]);} this. table. tBodies [0]. appendChild (frag); this. onSorted (this. header [column], this. viewState [column]); senfe ("tb1", "table_even", "table_odd", "table_over", "table_down");}, IsNumeric: function (num) // verify whether the data type is numeric. {return/^ d + (. d + )? $ /. Test (num) ;}, OnSorted: function (cell, IsAsc) // method executed after sorting. cell: indicates the header cell of the sorting column. IsAsc: indicates whether the table is sorted in ascending order. {return ;}} function senfe (o, a, B, c, d) {var t = document. getElementById (o ). getElementsByTagName ("tr"); for (var I = 0; I<t.length;i++){t[i].className=(t[i].sectionRowIndex%2==0)?a:b;t[i].onclick=function(){if(this.x!="1"){this.x="1";this.className=d;}else{this.x="0";this.className=(this.sectionRowIndex%2==0)?a:b;}}t[i].onmouseover=function(){if(this.x!="1")this.className=c;}t[i].onmouseout=function(){if(this.x!="1")this.className=(this.sectionRowIndex%2==0)?a:b;}}}</script> <script language="javascript" type="text/javascript">Window. onload = function () {new TableSorter ("tb1"); senfe ("tb1", "table_even", "table_odd", "table_over", "table_down ");}</script><script language="javascript"><!--function senfe(o,a,b,c,d){var t=document.getElementById(o).getElementsByTagName("tr");for(var i=1;i<t.length;i++){t[i].className=(t[i].sectionRowIndex%2==0)?a:b;t[i].onclick=function(){if(this.x!="1"){this.x="1";this.className=d;}else{this.x="0";this.className=(this.sectionRowIndex%2==0)?a:b;}}t[i].onmouseover=function(){if(this.x!="1")this.className=c;}t[i].onmouseout=function(){if(this.x!="1")this.className=(this.sectionRowIndex%2==0)?a:b;}}}--></script></head><body>Code: new TableSorter ("tb1 ");<br /><table border="0" class="table" width="100%"cellspacing="1" cellpadding="0" id="tb1"> <tr> <th>Serial Number</th> <th>Name</th> <th>Employee ID</th> <th>Position</th> <th>Gender</th> <th>Performance</th> <th>Report time</th> </tr> <tr> <td>1</td> <td>Andy Lau</td> <td>8008</td> <td>President</td> <td>Male</td> <td>98</td> <td>2008-04-12</td> </tr> <tr> <td>2</td> <td>Wu Qilong</td> <td>8004</td> <td>Supervisor</td> <td>Male</td> <td>80</td> <td>2008-04-16</td> </tr> <tr > <td>10</td> <td>Wang Guangliang</td> <td>8003</td> <td>Manager</td> <td>Male</td> <td>85</td> <td>2008-04-15</td> </tr> <tr> <td>4</td> <td>Zhang Xueyou</td> <td>8009</td> <td>Vice President</td> <td>Male</td> <td>90</td> <td>2008-04-11</td> </tr> <tr> <td>5</td> <td>Cecilia Cheung</td> <td>8005</td> <td>Assistant</td> <td>Female</td> <td>78</td> <td>2008-04-13</td> </tr> <tr> <td>6</td> <td>Edison Chen</td> <td>8001</td> <td>Director</td> <td>Male</td> <td>60</td> <td>2008-04-18</td> </tr> <tr> <td>7</td> <td>Chen Huilin</td> <td>8002</td> <td>Trial period</td> <td>Female</td> <td>85</td> <td>2008-04-18</td> </tr> <tr> <td>8</td> <td>Zhang Manyu</td> <td>8007</td> <td>Senior manager</td> <td>Female</td> <td>82</td> <td>2008-04-16</td> </tr> <tr> <td>9</td> <td>Zhou Runfa</td> <td>8006</td> <td>Vice President</td> <td>Male</td> <td>88</td> <td>2008-04-13</td> </tr></table></body></html>
Tip: you can modify some code before running