first, create the HTML page sort.html and copy the following content.
<! 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">
Create sort. js
/* Table sorting event: 2012 24 DOM nodes if the table needs to be sorted, add sort = "true" to the table attributes and the ID is unique and required. This JS file can be directly introduced because the created warehouse has no annotations. <Table width = "200" border = "1" Sort = "true" id = "mytab"> <thead style = "cursor: pointer "> <tr> <TD class =" DESC "> id <span> | </span> <em>-</em> </TD> <TD class =" desc "> name <span >|</span> <em>-</em> </TD> </tr> </thead> <tbody> <tr> <TD> 1 </TD> <TD> happy </TD> </tr> <TD> 3 </TD> <TD> open meal </TD> </tr> <tr> <TD> 5 </TD> <TD> open </TD> </tr> </tbody> </table> */var core = (function (window) { Return { Init: function (){ Core. gettablebyid (); Core. setheadclick (); }, I: function (ID ){ Return document. getelementbyid (ID ); }, N: function (name ){ Return document. getelementsbytagname (name ); }, Config :{ Arr: [] }, Gettablebyid: function (){ VaR table_arr = core. N ("table "); For (VAR I = 0; I <table_arr.length; I ++ ){ If (table_arr [I]. getattribute ("sort ")){ Core. config. Arr. Push (table_arr [I]. getattribute ("ID ")); } } // Alert (core. config. Arr) }, Setheadclick: function (){ VaR arr = core. config. Arr; If (! Arr. Length) return false; For (var j = 0; j <arr. length; j ++ ){ VaR thead = core. I (ARR [J]). getelementsbytagname ("thead") [0]. getelementsbytagname ("TD "); For (VAR I = 0; I <thead. length; I ++ ){ If (thead [I]. attachevent ){ Thead [I]. attachevent ("onclick", core. sortlist) } Else { Thead [I]. addeventlistener ("click", core. sortlist, false) } // If (I = 0 ){ // Thead [I]. Click (); // } } } }, Sortlist: function (e ){ VaR Index = 0, arr = [], sort = "ASC", table = NULL; If (E. srcelement ){ Index = E. srcelement. cellindex; Sort = E. srcelement. getattribute ("sort "); E. srcelement. classname = sort = "ASC "? "DESC": "ASC "; E. srcelement. setattribute ("sort", sort = "ASC "? "DESC": "ASC "); Table = core. gettableid (E. srcelement) } Else { Index = E. currenttarget. cellindex; Sort = E. currenttarget. getattribute ("sort "); E. currenttarget. classname = sort = "ASC "? "DESC": "ASC "; E. currenttarget. setattribute ("sort", sort = "ASC "? "DESC": "ASC "); Table = core. gettableid (E. currenttarget) } Core. getlist (table, index, arr ); Core. updatelist (table, sort, arr ); }, Gettableid: function (p ){ For (VAR I = 0, n = P; n = n. parentnode; I ++ ){ If (I> 100) break; If (N. nodename = "table "){ // Alert (N. nodename/* n. getattribute ("ID ")*/) Return N; } } }, Getlist: function (table, index, arr ){ VaR table = table. getelementsbytagname ("tbody") [0]; For (VAR I = 0; I <Table. Rows. length; I ++ ){ VaR item = table. Rows [I]; For (var j = 0; j <item. cells. length; j ++ ){ VaR jtem = item. cells [Index]; If (jtem. innerhtml ){ // Alert (jtem. innerhtml) Arr [I] = jtem. innerhtml; } Break; } } }, Updatelist: function (table, sort, arr ){ VaR table = table. getelementsbytagname ("tbody") [0]; For (VAR I = 0; I <arr. length; I ++ ){ For (var j = I + 1; j <arr. length; j ++ ){ If (sort = "ASC "){ If (ARR [I]> arr [J]) { VaR rwos = table. Rows [I]. clonenode (true ); Table. replaceChild (table. Rows [J], table. Rows [I]); If (J + 1 = arr. Length ){ // Table. insertbefore (rwos, null ); Table. appendchild (rwos) } Else { Table. insertbefore (rwos, table. Rows [J]); } VaR Tim = arr [I]; Arr. splice (I, 1, arr [J]); Arr. splice (J, 1, Tim ); } } Else { If (ARR [I] <arr [J]) { VaR rwos = table. Rows [I]. clonenode (true ); Table. replaceChild (table. Rows [J], table. Rows [I]); If (J + 1 = arr. Length ){ // Table. insertbefore (rwos, null ); Table. appendchild (rwos) } Else { Table. insertbefore (rwos, table. Rows [J]); } VaR Tim = arr [I]; Arr. splice (I, 1, arr [J]); Arr. splice (J, 1, Tim ); } } } } } };}) (Window); window. onload = core. init;