Dieser Artikel teilt die JavaScript -Implementierung der HTML -Tabellensortierungsfunktion für Ihre Referenz. Der spezifische Inhalt ist wie folgt
HTML -Code:
<table cellpadding = "0" id = "table"> <tr> <td> Klicken Sie auf mich </td> <td> Klicken Sie auf mich </td> <td> Klicken Sie auf mich </td> <td> Klicken Sie auf mich </td> <td> Klicken Sie auf mich </td> <Td> Klicken Sie auf mich </td> </tr1 id = "bfn_la_bac.usa"> 15.43 </span> </td> <td> 700 </td> <td> 1.220 </td> <td> a </td> </tr> <tr> <td> <span id = "bfn_la_c.usa"> 7.05 </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> <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>and</td> </tr> <tr> <td> <span 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"> 26.31 </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> <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> <span id = "bfn_la_pg.usa"> 63.16 </span> </td> <td> 7 </td> <td> 4 </td> <td> sub </td> </tr> </table>
Javascipt -Code:
var tablesort = function () {this.initialize.apply (this, argumente); } tabelsort.Prototype = {initialize: function (tableId, clickRow, startertrow, endrow, classup, classdown, selectClass) {this.table = document.getElementById (TableId); this.rows = this.table.rows; // alle Zeilen this.tags = this.rows [clickRow-1] .cells; // Tags 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 (); // Das zweidimensionale Array aller betroffenen TDs ist this.setshow (); }, // Setzen Sie den Tag -Switch -SetShow: function () {var defaultClass = this.tags [0] .className; für (var tag, i = 0; tag = this.tags [i]; i ++) {tag.index = i; AddEventListener (Tag, 'Click', Bind (Tag, Statu)); } var _this = this; var rurn = 0; Funktion statu () {für (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; }}}. removeclass (this.rows [i] .cells [n], cla); } addClass (this.rows [i] .cells [num], cla); }}, // starten sortieren Sie num gemäß der Spalte Aord Reverse Order oder Reihenfolge StartArray: Funktion (Aord, num) {var Aftersort = this.sortMethod (this.t2arr, aord, num); // Einfügen der sortierten zweidimensionalen Array in die Sortiermethode, um die Affekte und die Sortiermodus in die Affekte zu gehen. Array_td2Array: function () {var arr = []; für (var i = (this.starTrow-1), l = 0; i <(this.endrow); i ++, l ++) {arr [l] = []; für (var n = 0; n <this.rows [i] .cells.length; n ++) {arr [l] .push (this.rows [i] .cells [n] .innerhtml); }} return arr; }, // Ausgabe der inneren Halt der entsprechenden Zeilen und Spalten basierend auf dem sortierten zweidimensionalen Array-Array2TD: Funktion (num, arr) {this.colClassSet (num, this.SelectClass); für (var i = (this.starTrow-1), l = 0; i <(this.endrow); i ++, l ++) {für (var n = 0; n <this.TAGs.Length; n ++) {this.rows [i] .cells [n] .InnerHtml = Arr [l] [n]; }}}. X.Replace (/g, ''); arr = aord == 0? arr: arr.Reverse (); arr zurückgeben; }} /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Regexp ('(/s |^)'+className+'(/s | $)'); returnelement.className.match (reg); } Funktion addClass (Element, className) {if (! thas.hasclass (Element, className)) {element.className += "" +className; }} Funktion removeClass (element, className) {if (hasclass (element, className)) {var reg = new Regexp ('(/s |^)'+className+'(/s | $)'); element.className = element.className.replace (reg, ''); }} var bind = Funktion (Objekt, Fun) {return function () {return fun.apply (Objekt, Argumente); }} // Alle HTML -Tags -Funktionen killhtml (str) {return str.replace (/<[^>]+>/g, ""); } //. Tablesort ('Tabelle', 1,2,999, 'Up', 'Down', 'Hov');Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.