JavaScript implementation of table sorting method_javascript skills

Reference code:

Copy code The code is as follows: JavaScript控制网页内表格排序 *{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;} 点击排序 点击排序 点击排序 点击排序 15.43 700 1.220 www.corange.cn 7.05 4 3,000 asp 30.62 30 2,558,800 php 22.30 5 6 js 26.31 0.6 5 网站开发 63.16 7 4 子

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的二维数组 this.setShow(); }, //设置标签切换 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[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 the associated 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); } }, //Start Sort num Sort according to which column aord is in reverse order or order startArray:function(aord,num){ var afterSort = this.sortMethod(this.T2Arr,aord,num);//sorted two-dimensional array Pass to the sorting method this.array2Td(num,afterSort);//Output }, //Convert the affected rows and columns into a two-dimensional array _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; }, //Output the innerHTML of the corresponding rows and columns based on the sorted two-dimensional array 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] ; } } }, //Pass in a two-dimensional array, sort it according to the w items in the sub-items 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,' '); } }

点击排序	点击排序	点击排序	点击排序
15.43	700	1.220	www.corange.cn
7.05	4	3,000	asp
30.62	30	2,558,800	php
22.30	5	6	js
26.31	0.6	5	网站开发
63.16	7	4	子

JavaScript implementation of table sorting method_javascript skills

Related articles