<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>javascript Control of table sorting in Web pages </title>
<style>
*{font-family:arial, Helvetica, Sans-serif;font-size:14px;border:none;
Body{text-align:center;}
table{margin:100px Auto;}
td{width:100px;height:24px;text-align:center;line-height:24px;border:1px solid silver;}
. red{color:red;}
. Top{background: #CCCCCC; cursor:pointer;}
. Up{background: #FFFFCC url (up.gif) no-repeat right 5px;}
. Down{background: #FFFFCC url (down.gif) no-repeat right 5px;}
. Hov{background: #F0EFE5;}
</style>
<body>
<table cellpadding= "0" id= "table" >
<TR class= "Top" ><td> click Sort </td><td > Click sort </td><td> Click Sort </td><td> Click Sort </td></tr>
<tr>
<td><span id= "Bfn_la_bac.usa" >15.43</span></td>
<TD class= "Red" >700</td>
<td>1.220</td>
<TD class= "Red" >www.corange.cn</td>
</tr>
<tr><td><span id= "Bfn_la_c.usa" >7.05</span></td>
<TD class= "Red" >4</td>
<td>3,000</td>
<TD class= "Red" >asp</td>
</tr>
<tr><td><span id= "Bfn_la_jpm.usa" >30.62</span></td>
<TD class= "Red" >30</td>
<td>2,558,800</td>
<TD class= "Red" >php</td>
</tr>
<tr>
<td><span id= "Bfn_la_axp.usa" >22.30</span></td>
<TD class= "Red" >5</td><td>6</td>
<TD class= "Red" >js</td>
</tr>
<tr><td><span id= "Bfn_la_mrk.usa" >26.31</span></td>
<TD class= "Red" >0.6</td><td>5</td>
<TD class= "Red" > Website Development </td>
</tr>
<tr><td><span id= "Bfn_la_pg.usa" >63.16</span></td>
<TD class= "Red" >7</td><td>4</td>
<TD class= "Red" > Sub </td>
</tr>
</table>
<script type= "Text/javascript" >
var tablesort = function () {
This.initialize.apply (this,arguments);
}
Tablesort.prototype = {
Initialize:function (Tableid,clickrow,startrow,endrow,classup,classdown,selectclass) {
This. Table = document.getElementById (tableId);
This.rows = this. table.rows;//All Rows
This. tags = this.rows[clickrow-1].cells;//label td
This.up = Classup;
This.down = Classdown;
This.startrow = StartRow;
This.selectclass = Selectclass;
This.endrow = (Endrow = = 999? this.rows.length:endRow);
This. T2arr = This._td2array ();//two-dimensional array of all affected TD
This.setshow ();
},
Set Label Toggle
Setshow:function () {
var defaultclass = this. Tags[0].classname;
For (var Tag, i=0; Tag = this. tags[i];i++) {
Tag.index = i;
AddEventListener (Tag, ' click ', Bind (Tag,statu));
}
var _this =this;
var turn = 0;
function Statu () {
For (Var i=0;i<_this. tags.length;i++) {
_this. Tags[i].classname = Defaultclass;
}
if (turn==0) {
AddClass (This,_this.down)
_this.startarray (0,this.index);
Turn=1;
}else{
AddClass (This,_this.up)
_this.startarray (1,this.index);
turn=0;
}
}
},
Set the selected column style
Colclassset:function (NUM,CLA) {
Get connected to the TD
For (Var i= (this.startrow-1);i< (this.endrow); i++) {
for (Var n=0;n<this.rows[i].cells.length;n++) {
Removeclass (THIS.ROWS[I].CELLS[N],CLA);
}
AddClass (THIS.ROWS[I].CELLS[NUM],CLA);
}
},
Start sort num Sort Aord reverse or order according to the first few columns
Startarray:function (aord,num) {
var aftersort = This.sortmethod (this. T2arr,aord,num);//sorted two-dimensional array to the Sort method
THIS.ARRAY2TD (Num,aftersort);//Output
},
To convert the affected rows and columns into a two-dimensional array
_td2array:function () {
var arr=[];
For (Var i= (this.startrow-1),l=0;i< (this.endrow); i++,l++) {
Arr[l]=[];
for (Var n=0;n<this.rows[i].cells.length;n++) {
Arr[l].push (this.rows[i].cells[n].innerhtml);
}
}
return arr;
},
Outputs the corresponding rows and columns based on the sorted two-dimensional array of InnerHTML
Array2td:function (Num,arr) {
This.colclassset (Num,this.selectclass);
For (Var i= (this.startrow-1),l=0;i< (this.endrow); i++,l++) {
For (Var n=0;n<this. tags.length;n++) {
this.rows[i].cells[n].innerhtml = Arr[l][n];
}
}
},
Pass in a two-dimensional array, sorted by W in the subkeys of the two-dimensional array, and then return the sorted two-dimensional array
Sortmethod:function (arr,aord,w) {
var effectcol = This.getcolbynum (Whichcol);
Arr.sort (function (a,b) {
x = killhtml (a[w]);
y = killhtml (b[w]);
x = X.replace (/,/g, "");
y = y.replace (/,/g, ');
Switch (isNaN (x)) {
Case false:
return number (x)-Number (Y);
Break
Case true:
return X.localecompare (y);
Break
}
});
arr = Aord==0?arr:arr.reverse ();
return arr;
}
}
/*-----------------------------------*/
function AddEventListener (O,TYPE,FN) {
if (o.attachevent) {o.attachevent (' on ' +type,fn)}
else if (O.addeventlistener) {O.addeventlistener (Type,fn,false)}
else{o[' on ' +type] = fn;}
}
function hasclass (element, ClassName) {
var reg = new RegExp (' (\\s|^) ' +classname+ ' (\\s|$) ');
Return Element.className.match (REG);
}
function addclass (element, ClassName) {
if (!this.hasclass (element, ClassName))
{
Element.classname + = "" +classname;
}
}
function removeclass (element, ClassName) {
if (Hasclass (element, className)) {
var reg = new RegExp (' (\\s|^) ' +classname+ ' (\\s|$) ');
Element.classname = Element.className.replace (Reg, ');
}
}
var Bind = function (object, fun) {
return function () {
Return Fun.apply (object, arguments);
}
}
Get rid of all HTML tags
function killhtml (str) {
Return Str.replace (/<[^>]+>/g, "");
}
//------------------------------------------------
TableID the first few lines are the label rows, sorted from the first few lines, the first lines ending the sort (999 for the last) ascending label style, descending label style selecting column style
Note that the class of the label line should be consistent
var ex1 = new Tablesort (' table ', 1,2,999, ' Up ', ' Down ', ' HOV ');
</script>
<br><br>
</body>
