Cet article partage l'implémentation JavaScript de la fonction de tri de table HTML pour votre référence. Le contenu spécifique est le suivant
Code html :
<table cellpadding = "0" id = "table"> <tr> <td> cliquez sur moi </td> <td> cliquez sur moi </td> <td> cliquez sur moi </td> <td> cliquez sur moi </td> </td> cliquez sur moi </td> <pd> cliquez sur moi </td> </tr> <tr> <td> <pandi id = "bfn_la_bac.usa"> 15.43 </span> </td> <td> 700 </td> <td> 1.220 </span> <td> a </td> </tr> <tr> <td> <pan ID = "BFN_LA_C.USA"> 7.05 </pander> <td> 3 000 </td> <td> bing </td> </tr> <tr> <td> <span span ID = "bfn_la_jpm.usa"> 30.62 </span> </td> <td> 30 </td> <td> 2 558,800 </td> <td> et </ </td> id = "bfn_la_axp.usa"> 22.30 </span> </td> <td> 5 </td> <td> 6 </pd> <td> blind </td> </tr> <tr> <td> <span id = "bfn_la_mrk.usa"> 26.31 </span> </pandi <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> <td> <td> <pany id = "bfn_la_pg.usa"> 63.16 </span> </td> <td> 7 </td> <td> 4 </td> <td> sub </td> </tr> </ table>
Code javascipt :
var tablesort = function () {this.Initialize.Apply (this, arguments); } tablesort.prototype = {initialize: function (tableId, clickrow, startrow, endrow, classup, classown, selectClass) {this.Table = document.getElementById (tableId); this.Rows = this.Table.Rows; // toutes les lignes 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 (); // Le tableau bidimensionnel de tous les tds affectés est this.setShow (); }, // Définissez le commutateur de balise setShow: function () {var defaultClass = this.tags [0] .className; pour (var tag, i = 0; tag = this.tags [i]; i ++) {tag.index = i; addEventListener (balise, 'click', bind (balise, statu)); } var _This = this; var tour = 0; fonction stattu () {for (var i = 0; i <_this.tags.length; i ++) {_this.tags [i] .classname = defaultClass; } if (tour == 0) {addClass (this, _this.down) _This.startArray (0, this.index); tourner = 1; } else {addClass (this, _This.up) _This.startArray (1, this.index); tourner = 0; }}}, // Définissez le style de colonne sélectionné ColClassSet: fonction (num, CLA) {// Obtenez le td associé pour (var i = (this.startrow-1); i <(this.endrow); i ++) {for (var n = 0; n <this.rows [i] .cells.length; n ++) { RemoveClass (this.Rows [i] .Cells [n], CLA); } addClass (this.Rows [i] .Cells [num], cla); }}, // Démarrer le tri num selon quelle colonne Aord inverse commande ou commande startArray: function (aord, num) {var AfterSort = this.sortMethod (this.t2arr, aord, num); // collez le tableau tridimensionnel trié dans la méthode de tri pour ce.array2td (num, after-sort); // array bidimensionnel_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; }, // Sortie de l'InnerHTML des lignes et colonnes correspondantes basées sur le tableau de tableau bidimensionnel trié Array2TD: fonction (num, arr) {this.colClassset (num, this.selectClass); pour (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]; }}}, // passer un tableau bidimensionnel, trier en fonction des éléments W dans les éléments enfants du tableau bidimensionnel, puis renvoyer le tableau bidimensionnel trié SortMethod: fonction (arr, aord, w) {arr.sort (fonction (a, b) {x = killhtml (a [w]); y = killhtml (b [w]); x = x.replace (/ g, ''); y = y.replace (/, / g, ''); arr = aord == 0? arr: arr.reverse (); retour arr; }} / * --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Regexp ('(/ s | ^)' + classname + '(/ s | $)'); return element.classname.match (reg); } fonction addClass (élément, className) {if (! this.hasclass (élément, className)) {element.classname + = "" + className; }} fonction reposoveclass (élément, className) {if (hasclass (élément, className)) {var reg = new regexp ('(/ s | ^)' + classname + '(/ s | $)'); element.classname = element.classname.replace (reg, ''); }} var bind = function (objet, fun) {return function () {return fun.apply (objet, arguments); }} // Supprime tous les balises html function killhtml (str) {return str.replace (/ <[^>] +> / g, ""); } // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Tablesort («Table», 1,2,999, «Up», «Down», «Hov»);Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.