테이블 정렬 방법의 JavaScript 구현_javascript 기술

참조 코드:

코드 복사 코드는 다음과 같습니다. JavaScript控网页内表格排序 *{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;} body{text-align:center;} 테이블{margin:100px auto; } td{width:100px;height:24px;text-align:center;line-height:24px;border:1px solid silver;} .red{color:red;} .top{ 배경:#CCCCCC;커서:포인터;} .up{배경:#FFFFCC url(up.gif) 반복 없음 오른쪽 5px;} .down{배경:#FFFFCC url(down.gif) 없음 -오른쪽으로 5px;} .hov{배경:#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 = {

초기화 : function(tableId,clickRow,startRow,endRow,classUp,classDown,selectClass){ this.Table = document.getElementById (테이블 ID); 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; varturn = 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); 🎜> 턴=1; }else{ addClass(this,_this.up) _this.startArray(1,this.index)

} } }, //선택한 열 스타일 설정 colClassSet:function(num,cla){ //관련 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) } }, //시작 Sort num aord가 역순 또는 순서로 정렬되는 열에 따라 정렬 startArray:function(aord,num){ var afterSort = this.sortMethod(this.T2Arr,aord,num);//sorted two- 차원 배열 정렬 방법 this.array2Td(num,afterSort);//출력 }, //영향을 받은 행과 열을 2차원 배열로 변환 _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 }, //정렬된 2차원 배열을 기준으로 해당 행과 열의 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] } } }, //2차원 배열을 전달하고, 2차원 배열의 하위 항목에 있는 w 항목에 따라 정렬한 다음 정렬된 2차원 배열을 반환합니다. 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,''); .replace(/,/g,'' ); 스위치(isNaN(x)){ 케이스 false: 숫자(x) - 숫자(y) break; > 경우 true: return x.localeCompare(y); } }) arr ==0?arr:arr.reverse(); > 반환 } } /*--------------------------------* / 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, 인수) ; } } //모든 HTML 태그 제거 function killHTML(str){ return str.replace(/ ] >/g," ") } //----------------------------------------------- --- --- //tableid 어느 행이 레이블 행인지, 어느 행부터 정렬을 시작할지, 어느 행에서 정렬을 종료할지(99는 마지막을 의미함) 오름차순 레이블 스타일, 내림차순 레이블 스타일 열 스타일 선택 //레이블에 주의하세요. 행 클래스는 일관성이 있어야 합니다. var ex1 = new tableSort('table',1,2,999,'up','down','hov') </script&gt ;

点击排序	点击排序	点击排序
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	子