JavaScript ウィジェットネイティブテーブルソートテーブルスクリプト (IE Firefox Opera Chrome と互換性あり)_JavaScript スキル

まず、sort.html として HTML ページを作成し、次のコンテンツをそこにコピーします。

コードをコピー コードは次のとおりです。 🎜> 無題ドキュメント .descスパン{表示:なし;} .asc em{表示:なし;} ;/ スクリプト> ID スパン - 名前 |

ハッピー ディナー > /tbody> ID | - name | /thead> ; 🎜> 3 開く

新しいスクリプト ページ>

コードをコピー

コードは次のとおりです: /* テーブルソート関数 イベント: 2012 7 24 DOM ノード テーブルをソートする必要がある場合は、テーブル属性に sort="true" を追加してください ID は唯一かつ必要な ID です この JS ファイルは直接インポートできます 作成されたリポジトリにはコメントがないため ID | ;- gt; name | - ; > > / var Core = (function(window){ return { init: function(){ Core.getTableById(); Core.setHeadClick(); }, I: function(id){ return document.getElementById(id); }, N: function(name){ return document.getElementsByTagName(name); }, config: { arr:[] }, getTableById: function(){ var table_arr=Core.N("table"); i = 0; i if(table_arr[i].getAttribute("sort")){ Core.arr[i].getAttribute( "id")); } } //alert(Core.config.arr) }, setHeadClick: function(){ var arr = Core.config .arr; if(!arr.length) return false; for(var j = 0 ; j var thead = Core.I(arr[j]) .getElementsByTagName("thead")[0].getElementsByTagName("td"); for(var i = 0; i if(thead[i].attachEvent){ thead[i].attachEvent("onclick",Core.sortList) }else{ thead[i].addEventListener("click" ,Core.sortList,false) } //if(i==0){ // thead[i].click(); // } } } }, sortList: 関数(e){ varindex=0,arr=[],sort="asc",table=null; if(e.srcElement){ index=e.srcElement.cellIndex; >sort=e.srcElement.getAttribute("sort"); e.srcElement.className== "asc" "desc" : "asc" ; e.srcElement.setAttribute("sort") 、ソート == "asc" ? : "asc"); table = Core.getTableId(e.srcElement) }else{ index=e.currentTarget.cellIndex; sort=e.currentTarget.getAttribute("sort"); e.currentTarget.className=sort == "asc" "desc" : "asc"; e.currentTarget.setAttribute("sort", sort == "asc" ? "desc" : "asc"); table = Core.getTableId(e.currentTarget) Core .getList(table,index,arr); Core.updateList(table,sort,arr); }, getTableId: function(p){ for(var i=0,n =p;n=n.parentNode;i ){ if(i>100) Break; if(n.nodeName=="TABLE"){ //alert(n.nodeName/* n.getAttribute("id")*/) return n; } } }, getList: function (table,index,arr){ var table = table.getElementsByTagName("tbody")[0]; 🎜>for(var i = 0; i var item = table.rows[i]; for (var j = 0; j var jtem = item.cells[index]; if(jtem.innerHTML){ //alert(jtem.innerHTML ) arr[i]=jtem.innerHTML; } break; } } }, updateList: function (table,sort,arr){ var table = table.getElementsByTagName("tbody") [0]; for(var i = 0; i for(var j = i 1;j if(sort= ="asc"){ if(arr[i] > arr[j]){ var rwos=table.rows[i].cloneNode (true); table.replaceChild(table. rows[j],table.rows[i]); if(j 1==arr.length){ //table.insertBefore(rwos ,null); }else{ table.insertBefore(rwos,table.rows[j]); } var tim= arr[i] ; arr.splice(i,1,arr) [j]); arr.splice(j,1,tim); } }else{ if(arr[i ] var rwos=table.rows[i].cloneNode(true); table.replaceChild(table.rows[j],table.rows[i]); if(j 1==arr.length){ //table.insertBefore(rwos,null); table.appendChild(rwos) }else{ table.insertBefore(rwos ,table.rows[j]); var tim= arr[i]; arr.splice(i,1,arr[j]); arr.splice(j, 1,tim); } } } })(ウィンドウ); window.onload=Core.init;

JavaScript ウィジェット ネイティブ テーブル ソート テーブル スクリプト (IE Firefox Opera Chrome と互換性あり)_JavaScript スキル

JavaScript ウィジェットネイティブテーブルソートテーブルスクリプト (IE Firefox Opera Chrome と互換性あり)_JavaScript スキル