В этой статье используется реализация JavaScript функции сортировки таблицы HTML для вашей ссылки. Конкретный контент заключается в следующем
HTML -код:
<Таблица cellPadding = "0" id = "table"> <tr> <td> Нажмите меня </td> <td> Нажмите меня </td> <td> Нажмите меня </td> <td> Нажмите меня </td> <td> Нажмите меня </td> <td> </td> </tr> <td> id = "bfn_la_bac.usa"> 15.43 </span> </td> <td> 700 </td> <td> 1,220 </td> <td> </td> </tr> <tr> <td> <pan ID = "BFN_LA_C.USA"> 7.05 </span> </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> <TD> <TD> <TD> <TD> <TD> <TD> 4 <TD> <TD> <TD> <TD> 4 <TD> <TD> <TD> 4 <TD> 4. <TD> 3000 </TD> <TD> bing </td> </tr> <tr> <td> <span ID = "bfn_la_jpm.usa"> 30,62 </span> </td> <td> 30 </td> <td> 2,58,800 </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> <td> <td> <td> <td> <td> <td> 2,558,800 </td> <td> и <td> <td> 2,558,800 </td> <td> и </td> <td> 2,558,800 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 </span> </td> </td> <td> <td> </td> </td> <td> <dd> </td> <td> </td> </td> <dd> </td> </td> <td> </td> <td> </td> </td> </td> <td> <td> <dd> </td> <td> <dd> </td> <td> <td> <dd> </td> <td>. <Td> 5 </td> <td>-</td> </tr> <tr> <td> <span = "bfn_la_mrk.usa"> 26.31 </span> </td> <td> 0.6 </td> <td> 5 </td> <td>-</td> <tr> <td> id = "bfn_la_pg.usa"> 63.16 </span> </td> <td> 7 </td> <td> 4 </td> <td> sub </td> </tr> </table>
Код Javascipt :
var tablesort = function () {this.initialize.apply (this, аргументы); } tablesOrt.prototype = {initiaze: function (tableId, clickrow, startrow, endrow, classup, classdown, selectclass) {this.table = document.getElementbyId (tableId); this.rows = this.table.rows; // Все строки this.tags = this.rows [clickrow-1] .cells; // теги 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 (); // Двумерная массива всех затронутых TDS является this.setShow (); }, // Установить Tag Switch SetShow: function () {var defaultClass = this.tags [0] .className; for (var Tag, i = 0; tag = this.tags [i]; i ++) {tag.index = i; addEventListener (Tag, 'click', bind (Tag, statU)); } var _This = 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); поворот = 1; } else {addClass (this, _This.Up) _This.StartArray (1, this.index); поворот = 0; }}}, // Установить выбранную колонку Стиля ColclassSet: function (num, cla) {// Получить связанный Td для (var i = (this.startrow-1); i <(this.endrow); i ++) {for (var n = 0; n <this.rows [i] .cells.length; n ++) {var n = 0; n <this.rows [i] .cells.length; removeClass (this.Rows [i] .cells [n], cla); } addClass (this.rows [i] .cells [num], cla); }}, // начало сортировки num в соответствии с каким столбцом Aord обратный заказ или запуск порядка: function (aord, num) {var Aftersort = this.sortMethod (this.t2arr, aord, num); // вставьте сортированную двумерную массив в метод сортировки, чтобы перейти к этому. Array2td (num, athessort); array_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; }, // выводить innerhtml соответствующих строк и столбцов на основе отсортированного двухмерного массива Array2td: function (num, arr) {this.colclassset (num, this.selectclass); for (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]; }}}, // пройти двумерный массив, сортировать в соответствии с элементами W в детских элементах двумерного массива, а затем верните сортированный двумерный массив SortMethod: функция (arr, aord, w) {arr.sort (функция (a, b) {x = killhtml (w]); X.Replication (/,/g, ''); arr = aord == 0? arr: arr.reverse (); возврат Arr; }} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- RegeXP ('(/s |^)'+classname+'(/s | $)'); return element.classname.match (reg); } функция addClass (element, classname) {if (! this.hasclass (element, classname)) {element.classname += "" +classname; }} функция removeClass (element, classname) {if (hasclass (element, classname)) {var reg = new Regexp ('(/s |^)'+classname+'(/s | $)'); element.classname = element.classname.replace (reg, ''); }} var bind = function (object, fun) {return function () {return fun.apply (object, arguments); }} // Удалить все теги html function killhtml (str) {return str.replace (/<[^>]+>/g, ""); } // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Tablesort ('Table', 1,2,999, 'up', 'Down', 'hov');Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.