Artikel ini berbagi implementasi JavaScript fungsi penyortiran tabel HTML untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Kode HTML :
<Table cellpadding = "0" id = "Table"> <tr> <td> Klik saya </td> <td> Klik saya </td> <td> Klik saya </td> <td> id = "bfn_la_bac.usa"> 15.43 </span> </td> <td> 700 </td> <td> 1.220 </td> <td> a </td> </tr> <td> </td = "BFN_LA_C.USA"> </TD </TD = "BFN_LA_C.USA"> </TD </td = "BFN_LA_C.USA" >. <td> 3.000 </td> <td> Bing </td> </tr> <tr> <td> <span id = "bfn_la_jpm.usa"> 30.62 </span> </t/<td> </td> <t/td> <t/td> <t/td> <t/td> <t/td> <t/td> <t/ id = "bfn_la_axp.usa"> 22,30 </span> </td> <td> 5 </td> <td> 6 </td> <td> Blind </td> </usa> <td> <pan id = "BFN_LA_MRK.USA"> 26.31 </rentang </T. <td> 5 </td> <td>-</td> </tr> <tr> <td> <span id = "bfn_la_mrk.usa"> 26.31 </span> </td> <td> </td> <td> <td> <TD> <TD> </TR> </TR> </TR> </TRD> </TD> </TD> </TD> </td> </ id = "bfn_la_pg.usa"> 63.16 </span> </td> <td> 7 </td> <td> 4 </td> <td> sub </td> </tr> </able>
Kode Javascipt :
var tablesort = function () {this.initialize.Apply (ini, argumen); } TABLESORT.PROTOTYPE = {initialize: function (tableId, clickrow, startrow, endrow, classup, classdown, selectclass) {this.table = document.getElementById (tableId); this.rows = this.table.rows; // semua baris this.tags = this.rows [clickrow-1] .cells; // Tag 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 (); // Array dua dimensi dari semua TDS yang terpengaruh adalah this.setShow (); }, // Atur tag switch setShow: function () {var defaultclass = this.tags [0] .className; untuk (tag var, i = 0; tag = this.tags [i]; i ++) {tag.index = i; addeventListener (tag, 'klik', bind (tag, statu)); } var _pis = 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); putar = 1; } else {addClass (this, _this.up) _this.startarray (1, this.index); belok = 0; }}}, // Atur gaya kolom yang dipilih colclassset: function (num, cla) {// Dapatkan TD terkait untuk (var i = (this.startrow-1); i <(this.endrow); i ++) {untuk (var n = 0; n <this.rows [i] .cells.length; n ++) {var n = 0; n <this Removeclass (this.rows [i] .cells [n], cla); } addClass (this.rows [i] .cells [num], cla); }}, // Mulai urutkan num sesuai dengan kolom mana AORD reverse order atau order startArray: function (aord, num) {var aftersort = this.sortmethod (this.t2arr, aord, num); // tempel dan convert (num, afters/afters/afters/afters/afters/afters/afters/afters/afters/afters/afters/aftersor (afters (num, aftersor (num, num, num, aftersor); Two-dimensional array_td2Array: function () {var arr = []; untuk (var i = (this.startrow-1), l = 0; i <(this.endrow); i ++, l ++) {arr [l] = []; untuk (var n = 0; n <this.rows [i] .cells.length; n ++) {arr [l] .push (this.rows [i] .cells [n] .innerHtml); }} return arr; }, // output InnerHTML dari baris dan kolom yang sesuai berdasarkan pada fungsi array dua dimensi yang diurutkan: function (num, arr) {this.colclassset (num, this.selectclass); untuk (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] [n]; }}}, // Lewati array dua dimensi, urutkan sesuai dengan item W dalam item anak dari array dua dimensi, dan kemudian mengembalikan sortMethod array dua dimensi yang diurut x.replace (/,/g, ''); arr = aord == 0? arr: arr.reverse (); return arr; }} /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Regexp ('(/s |^)'+className+'(/s | $)'); return element.classname.match (reg); } function addClass (element, classname) {if (! this.hasclass (element, classname)) {element.className += "" +className; }} function removeClass (elemen, classname) {if (hasclass (elemen, classname)) {var reg = baru regexp ('(/s |^)'+className+'(/s | $)'); element.classname = element.classname.replace (reg, ''); }} var bind = function (objek, fun) {return function () {return fun.apply (objek, argumen); }} // Hapus semua fungsi tag html killhtml (str) {return str.replace (/<[^>]+>/g, ""); } // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Tablesort ('Table', 1,2.999, 'Up', 'Down', 'Hov');Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.