テーブルソートメソッドのJavaScript実装_JavaScriptスキル

参照コード:

コードをコピー コードは次のとおりです:

JavaScript制御网页内表格排序 *{font-family:Arial、Helvetica、sans-serif;font-size:14px;border:none;} body{text-align:center;} table{margin:100px auto; } td{幅:100px;高さ:24px;text-align:center;line-height:24px;border:1px ソリッドシルバー;} .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 -右 5 ピクセルを繰り返します;} .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 = {

初期化 : 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); ターン = 0; > } }, //選択した列のスタイルを設定します 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);//2 つのソート -次元配列 並べ替えメソッドに渡します 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(thatCol) arr.sort(function(a,b){ x = killHTML(a[w]); y = killHTML(b[w]); x = x.replace(/,/g,''); .replace(/,/g,'' ); switch (isNaN(x)){ case false: return Number(x) - Number(y); > true の場合: return x. } }); > 戻り値 } } /*--------------------------------* / 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.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	子