Este artículo comparte la implementación de JavaScript de la función de clasificación de tabla HTML para su referencia. El contenido específico es el siguiente
Código HTML :
<table cellPadding = "0" id = "table"> <tr> <td> haga clic en mí </td> <td> haga clic en mí </td> <td> haga clic en mí </td> <td> haga clic en mí </td> <td> haga clic en mí </td> <td> haga clic en mí </td> </tr> <tr> <td> <span id = "Bfn_la_Bac.USA"> 15.43 </span> </td> <TD> 700 </td> <TD> 1.220 </td> <td> a <td> 3,000 </td> <td> bing </td> </tr> <tr> <tr> <td> <span id = "bfn_la_jpm.usa"> 30.62 </span> </td> <td> id = "bfn_la_axp.usa"> 22.30 </span> </td> <td> 5 </td> <td> 6 </td> <td> ciego </td> </tr> <tr> <tr> <td> <span id = "bfn_la_mrk.usa <td> 5 </td> <td>-</td> </tr> <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> id = "BFN_LA_PG.USA"> 63.16 </span> </td> <td> 7 </td> <td> 4 </td> <td> sub </td> </tr> </table>
Código Javascipt :
var tableort = function () {this.initialize.apply (this, argumentos); } tablesort.prototype = {Initialize: function (TableID, ClickRow, StarTrow, EndRow, ClassUp, ClassDown, SelectClass) {this.table = document.getElementById (tableID); this.rows = this.table.rows; // Todas las filas this.tags = this.rows [clickrow-1] .cells; // etiquetas td th.up = classup; this.down = classDown; this.StarTrow = StarTrow; this.selectclass = selectClass; this.endrow = (endrow == 999? this.rows.length: endrow); this.t2arr = this._td2Array (); // La matriz bidimensional de todos los TD afectados es este.setShow (); }, // Establezca el interruptor de etiqueta setshow: function () {var defaultClass = this.tags [0] .classname; for (var tag, i = 0; tag = this.tags [i]; i ++) {tag.index = i; addEventListener (etiqueta, 'hacer clic', bind (etiqueta, statu)); } var _this = this; var giro = 0; función 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); giro = 1; } else {addClass (this, _this.up) _this.startarray (1, this.index); turno = 0; }}}, // Establezca el estilo de columna seleccionada colclassset: function (num, cla) {// Obtener el TD asociado para (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); } }, //Start sort num according to which column aord reverse order or order startArray:function(aord,num){ var afterSort = this.sortMethod(this.T2Arr,aord,num);//Paste the sorted two-dimensional array into the sorting method to go to this.array2Td(num,afterSort);//Output}, //Convert the affected rows and columns into a two-dimensional array_td2array: function () {var arr = []; for (var i = (this.starTrow-1), l = 0; i <(this.endrow); i ++, l ++) {arr [l] = []; para (var n = 0; n <this.rows [i] .Cells.length; n ++) {arr [l] .push (this.rows [i] .Cells [n] .innerhtml); }} return arr; }, // emite el internerhtml de las filas y columnas correspondientes basadas en la matriz de matriz bidimensional ordenada2TD: function (num, arr) {this.colclassset (num, this.selectclass); para (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 = acr [l] [n]; }}}, // pase una matriz bidimensional, ordene de acuerdo con los elementos W en los elementos infantiles de la matriz bidimensional y luego devuelva la matriz bidimensional ordenada sortmethod: function (arr, aord, w) {arr.sort (function (a, b) {x = killhtml (a [w]); y = killhtml (b [w]; X.Replace (/, ''); arr = aord == 0? arr: arr.reverse (); regresar arr; }} /*------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------- Regexp ('(/s |^)'+classname+'(/s | $)'); return element.classname.match (reg); } function addClass (element, className) {if (! this.hasclass (element, classname)) {element.classname += "" +className; }} función removeClass (element, className) {if (Hasclass (element, className)) {var reg = new Regexp ('(/s |^)'+className+'(/s | $)'); element.classname = element.classname.replace (reg, ''); }} var bind = function (objeto, diversión) {return function () {return fun.apply (objeto, argumentos); }} // Eliminar todas las etiquetas HTML funcionan Killhtml (str) {return str.replace (/<[^>]+>/g, "); } // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Tablesort ('Table', 1,2,999, 'Up', 'Down', 'Hov');Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.