First, create the HTML page sort.html and copy the following content.
Copy codeThe Code is as follows: <! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Style type = "text/css">
. Desc span {display: none ;}
. Asc em {display: none ;}
</Style>
<Script type = "text/javascript" src = "sort. js"> </script>
</Head>
<Body>
<Table width = "200" border = "1" cellpadding = "0" cellspacing = "0" 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>
<Tr>
<Td> 3 </td>
<Td> open meal </td>
</Tr>
<Tr>
<Td> 5 </td>
<Td> open </td>
</Tr>
</Tbody>
</Table>
<Table width = "200" border = "1" sort = "true" id = "mytabs">
<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>
<Tr>
<Td> 3 </td>
<Td> open meal </td>
</Tr>
<Tr>
<Td> 5 </td>
<Td> open </td>
</Tr>
</Tbody>
</Table>
</Body>
</Html>
Create sort. jsCopy codeThe Code is as follows :/*
Table sorting
Events: 2012 7 24
DOM Node
If the table needs to be sorted, add sort = "true" to the table attribute"
And the id is unique and required.
This js file can be directly introduced.
Because the created warehouse has no comments
<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>
<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;