この記事では、参照用のHTMLテーブルソート機能のJavaScript実装を共有しています。特定のコンテンツは次のとおりです
HTMLコード：
<Table CellPadding = "0" id = "table"> <tr> <td>クリックしてください</td> <td>私をクリックします</td> <td>私をクリックします</td> <td>クリックします</td> <td> id = "Bfn_la_bac.usa"> 15.43 </span> </td> <td> 700 </td> <td> 1.220 </td> <td> a </td> </tr <tr> <td> <td> <span id = "bfn_la_c.usa" <td> 3,000 </td> <td> bing </td> </tr> <tr> <td> <span id = "bfn_la_jpm.usa"> 30.62 </span> </td> <td> 30 </td> <td> 2,558,800 </td> <td> </</< id = "Bfn_la_axp.usa"> 22.30 </span> </td> <td> 5 </td> <td> 6 </td> <td> blind </td> </tr> <tr> <td> <span id = "bfn_la_mrk.usa" <td> 5 </td> <td> - </td> </tr> <tr> <td> <span id = "bfn_la_mrk.usa"> 26.31 </span> </td> <td> 0.6 </td> <td> 5 </td> <td>-</td> </tr <tr <td> <td> <td> id = "Bfn_la_pg.usa"> 63.16 </span> </td> <td> 7 </td> <td> 4 </td> <td> sub </td> </tr> </table>
Javasciptコード：
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; //すべてのrows this.tags = this.rows [clickrow-1] .cells; // tags td td td td td td td td td classup; this.down = classdown; this.startrow = startrow; this.selectclass = selectclass; this.endrow =（endrow == 999？this.rows.length：endrow）; this.t2arr = this._td2array（）; //影響を受けるすべてのTDSの2次元配列は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.length; 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; }}}、//選択した列スタイルのcolclassset：function（num、cla）{//（var i =（this.startrow-1）; i <（this.endrow）; i ++）{var n = 0; n <this.rows [i] .cells.length; n ++; n ++; removeclass（this.rows [i] .cells [n]、cla）; } addclass（this.rows [i] .cells [num]、cla）; }}、// column aord aord reverse order or startArray：function（aord、num）{var aftersort = this.sortmethod（this.t2arr、aord、num）; //ソートされた2次元アレイを貼り付けて並べ替えて並べ替えて、awray2td（abute and abute and int the colum int the columns> columt the column sulting methodに貼り付けます。 2次元Array_td2Array：function（）{var arr = []; for（var i =（this.startrow-1）、l = 0; i <（this.endrow）; i ++、l ++）{arr [l] = []; for（var n = 0; n <this.rows [i] .cells.length; n ++）{arr [l] .push（this.rows [i] .cells [n] .innerhtml）; }} return arr; }、//ソートされた2次元配列array2tdに基づいて、対応する行と列の内側htmlを出力：function（num、arr）{this.colclasset（num、this.selectclass）; for（var i =（this.startrow-1）、l = 0; i <（this.endrow）; i ++、l ++）{for（var n = 0; n <this.tags.length; n ++）{this.rows [i] .cells [n] .innerhtml = arr [l]; }}}、// 2次元配列を渡し、2次元配列の子アイテムのwアイテムに従って並べ替え、ソートされた2次元アレイsortmethod：function（arr、aord、w）{arr.sort（function（a、b）{x = killhtml（a w]）; y = killhtml（b [w]）; X.Replace（/g）; arr = aord == 0？arr：arr.Reverse（）; arrを返します。 }} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 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、 ""）; } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ = new tablesort（ 'table'、1,2,999、 'up'、 'down'、 'hov'）;上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。