Este artigo compartilha a implementação do JavaScript da função de classificação de tabela HTML para sua referência. O conteúdo específico é o seguinte
Código HTML :
<table cellpadding="0" id="table"> <tr> <td>click me</td> <td>click me</td> <td>click me</td> <td>click me</td> <td>click me</td> <td>click me</td> </tr> <tr> <td> <span id = "bfn_la_bac.usa"> 15.43 </span> </td> <td> 700 </td> <td> 1.220 </td> <td> a </td> </tr> <tr> <td> <td <= "bfn_la_cd>> 7.0 7.0 <r> <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> cegos </td> </tr> <fr> <td> <span id = "bfn_la_mrk.usa> <.3.3.3.2 </td> <td> <span =" bfn_la_mrk.usa "> 26.31 </td> <td> <spanned =" bfn_la_mrk.USD> 26.31. <Td> 5 </td> <td>-</td> </tr> <tr> <td> <span id = "bfn_la_mrk.usa"> 26.31 </pan> </td> <td> 0.6 </td> <Td> 5 </td> <td> </td> id = "bfn_la_pg.usa"> 63.16 </span> </td> <td> 7 </td> <td> 4 </td> <td> sub </td> </tr> </tabela>
Código Javascipt :
var tablesort = function () {this.initialize.apply (this, argumentos); } tablesort.prototype = {Initialize: function (tableId, clickrow, startrow, endrow, classup, classdown, selectClass) {this.table = document.getElementById (tabelaId); this.Rows = this.Table.Rows; // todas as linhas this.tags = this.Rows [clickrow-1] .Cells; // tags td th this.up = Classup; this.down = classdown; this.startrow = startrow; this.selectClass = selectClass; this.endrow = (endrow == 999? this.rows.length: endrow); this.t2arr = this._td2Array (); // A matriz bidimensional de todos os TDs afetados é this.setShow (); }, // defina o switch tag setShow: function () {var defaultClass = this.tags [0] .className; for (var tag, i = 0; tag = this.tags [i]; i ++) {tag.index = i; addEventListener (tag, 'clique', bind (tag, statu)); } var _This = this; var Turn = 0; função 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; }}}, // Defina o estilo de coluna selecionado ColclassSet: function (num, cla) {// Obtenha o TD associado para (var i = (this.startrow-1); i <(this.endrow); i ++) {para (var n = 0; n this.rows [i] .Cells.lngth; removeclass (this.Rows [i] .Cells [n], cla); } addclass (this.rows [i] .Cells [num], cla); }}, // Inicie a classificação Num de acordo com qual coluna Aord reversa Ordem ou Order StartArray: function (aord, num) {var depois que this.sortMethod (this.t2arr, aord, num); // cola o conjunto bidimensional e o método de classificação e o método de classificação, // e o uso de this.Array2D (nums); Array bidimensional_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); }} retornar arr; }, // Saia o inerhtml das linhas e colunas correspondentes com base na matriz bidimensional classificada Array2td: function (num, arr) {this.colclassSet (num, thisselectClass); 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 = arr [l] [n]; }}}, // passa uma matriz bidimensional, classifique de acordo com os itens W nos itens filhos da matriz bidimensional e depois retorne a matriz bidimensional classificada SortMethod: function (arr, aord, w) {arr.sort (function (a, b) {x = killhtml (w] {wh; x.replicar (,/G, ''); arr = aord == 0? arr: arr.versever (); retornar arr; }} /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Regexp ('(/s |^)'+className+'(/s | $)'); return element.className.match (reg); } função addclass (element, className) {if (! this.hasclass (element, className)) {element.className += "" +className; }} função removeclass (element, className) {if (hasclass (element, className)) {var reg = new regexp ('(/s |^)'+className+'(/s | $)'); element.className = element.className.replace (reg, ''); }} var bind = function (objeto, diversão) {return function () {return fun.apply (objeto, argumentos); }} // remova todas as tags html função killhtml (str) {return str.replace (/<[^>]+>/g, ""); } // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Tablesort ('Table', 1,2,999, 'UP', 'Down', 'Hov');O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.