本文實例為大家分享了JavaScript實現(xiàn)HTML表格排序功能，供大家參考，具體內(nèi)容如下

HTML代碼：

click me	click me	click me	click me
15.43	700	1.220	阿
7.05	4	3,000	炳
30.62	30	2,558,800	和
22.30	5	6	瞎
26.31	0.6	5	-
63.16	7	4	子

JavaScirpt代碼：

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;//所有行

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的二維數(shù)組

this.setShow();

},

//設(shè)置標簽切換

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>

_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;

}

}

},

//設(shè)置選中列樣式

colClassSet:function(num,cla){

//得到關(guān)聯(lián)到的td

for(var i= (this.startRow-1);i

for(var n=0;n

removeClass(this.rows[i].cells[n],cla);

}

addClass(this.rows[i].cells[num],cla);

}

},

//開始排序 num 根據(jù)第幾列排序 aord 逆序還是順序

startArray:function(aord,num){

var afterSort = this.sortMethod(this.T2Arr,aord,num);//排序后的二維數(shù)組傳到排序方法中去

this.array2Td(num,afterSort);//輸出

},

//將受影響的行和列轉(zhuǎn)換成二維數(shù)組

_td2Array:function(){

var arr=[];

for(var i=(this.startRow-1),l=0;i

arr[l]=[];

for(var n=0;n

arr[l].push(this.rows[i].cells[n].innerHTML);

}

}

return arr;

},

//根據(jù)排序后的二維數(shù)組來輸出相應(yīng)的行和列的 innerHTML

array2Td:function(num,arr){

this.colClassSet(num,this.selectClass);

for(var i= (this.startRow-1),l=0;i

for(var n=0;n

this.rows[i].cells[n].innerHTML = arr[l][n];

}

}

},

//傳進來一個二維數(shù)組，根據(jù)二維數(shù)組的子項中的w項排序，再返回排序后的二維數(shù)組

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)){

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);

}

}

//去掉所有的html標記

function killHTML(str){

return str.replace(/]+>/g,"");

}

//------------------------------------------------

//tableid 第幾行是標簽行，從第幾行開始排序，第幾行結(jié)束排序(999表示最后) 升序標簽樣式，降序標簽樣式 選中列樣式

//注意標簽行的class應(yīng)該是一致的

var ex1 = new tableSort('table',1,2,999,'up','down','hov');

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的HTML列表内容自动排序,JS实现HTML表格排序功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。