Js table sorting

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.