JS实现HTML表格排序功能
本文实例为大家分享了JavaScript实现HTML表格排序功能，供大家参考，具体内容如下
HTML代码：
<tablecellpadding="0"id="table"> <trclass="top"> <td>clickme</td> <td>clickme</td> <td>clickme</td> <td>clickme</td> </tr> <tr> <td> <spanid="bfn_la_bac.usa">15.43</span> </td> <tdclass="red">700</td> <td>1.220</td> <tdclass="red">阿</td> </tr> <tr> <td> <spanid="bfn_la_c.usa">7.05</span> </td> <tdclass="red">4</td> <td>3,000</td> <tdclass="red">炳</td> </tr> <tr> <td> <spanid="bfn_la_jpm.usa">30.62</span> </td> <tdclass="red">30</td> <td>2,558,800</td> <tdclass="red">和</td> </tr> <tr> <td> <spanid="bfn_la_axp.usa">22.30</span> </td> <tdclass="red">5</td> <td>6</td> <tdclass="red">瞎</td> </tr> <tr> <td> <spanid="bfn_la_mrk.usa">26.31</span> </td> <tdclass="red">0.6</td> <td>5</td> <tdclass="red">-</td> </tr> <tr> <td> <spanid="bfn_la_pg.usa">63.16</span> </td> <tdclass="red">7</td> <td>4</td> <tdclass="red">子</td> </tr> </table>
JavaScirpt代码：
vartableSort=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;//所有行
this.Tags=this.rows[clickRow-1].cells;//标签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();//所有受影响的td的二维数组
this.setShow();
},
//设置标签切换
setShow:function(){
vardefaultClass=this.Tags[0].className;
for(varTag,i=0;Tag=this.Tags[i];i++){
Tag.index=i;
addEventListener(Tag,'click',Bind(Tag,statu));
}
var_this=this;
varturn=0;
functionstatu(){
for(vari=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;
}
}
},
//设置选中列样式
colClassSet:function(num,cla){
//得到关联到的td
for(vari=(this.startRow-1);i<(this.endRow);i++){
for(varn=0;n<this.rows[i].cells.length;n++){
removeClass(this.rows[i].cells[n],cla);
}
addClass(this.rows[i].cells[num],cla);
}
},
//开始排序num根据第几列排序aord逆序还是顺序
startArray:function(aord,num){
varafterSort=this.sortMethod(this.T2Arr,aord,num);//排序后的二维数组传到排序方法中去
this.array2Td(num,afterSort);//输出
},
//将受影响的行和列转换成二维数组
_td2Array:function(){
vararr=[];
for(vari=(this.startRow-1),l=0;i<(this.endRow);i++,l++){
arr[l]=[];
for(varn=0;n<this.rows[i].cells.length;n++){
arr[l].push(this.rows[i].cells[n].innerHTML);
}
}
returnarr;
},
//根据排序后的二维数组来输出相应的行和列的innerHTML
array2Td:function(num,arr){
this.colClassSet(num,this.selectClass);
for(vari=(this.startRow-1),l=0;i<(this.endRow);i++,l++){
for(varn=0;n<this.Tags.length;n++){
this.rows[i].cells[n].innerHTML=arr[l][n];
}
}
},
//传进来一个二维数组，根据二维数组的子项中的w项排序，再返回排序后的二维数组
sortMethod:function(arr,aord,w){
arr.sort(function(a,b){
x=killHTML(a[w]);
y=killHTML(b[w]);
x=x.replace(/,/g,'');
y=y.replace(/,/g,'');
switch(isNaN(x)){
casefalse:
returnNumber(x)-Number(y);
break;
casetrue:
returnx.localeCompare(y);
break;
}
});
arr=aord==0?arr:arr.reverse();
returnarr;
}
}
/*-----------------------------------*/
functionaddEventListener(o,type,fn){
if(o.attachEvent){
o.attachEvent('on'+type,fn);
}elseif(o.addEventListener){
o.addEventListener(type,fn,false);
}else{
o['on'+type]=fn;
}
}
functionhasClass(element,className){
varreg=newRegExp('(\s|^)'+className+'(\s|$)');
returnelement.className.match(reg);
}
functionaddClass(element,className){
if(!this.hasClass(element,className)){
element.className+=""+className;
}
}
functionremoveClass(element,className){
if(hasClass(element,className)){
varreg=newRegExp('(\s|^)'+className+'(\s|$)');
element.className=element.className.replace(reg,'');
}
}
varBind=function(object,fun){
returnfunction(){
returnfun.apply(object,arguments);
}
}
//去掉所有的html标记
functionkillHTML(str){
returnstr.replace(/<[^>]+>/g,"");
}
//------------------------------------------------
//tableid第几行是标签行，从第几行开始排序，第几行结束排序(999表示最后)升序标签样式，降序标签样式选中列样式
//注意标签行的class应该是一致的
varex1=newtableSort('table',1,2,999,'up','down','hov');
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。