이 기사에서는 참조를 위해 HTML 테이블 분류 기능의 JavaScript 구현을 공유합니다. 특정 내용은 다음과 같습니다
HTML 코드 :
<TABLE CELLPADDING = "0"ID = "테이블"> <tr> <td> ME를 클릭하십시오 </td> <td> ME를 클릭하십시오 </td> <td> Me </td> <td> 클릭을 클릭하십시오 </td> <td> me를 클릭하십시오 </td> <td> 클릭 me </td> <td> <td> <td> <td> <td> <td> <td> id = "bfn_la_bac.usa"> 15.43 </span> </td> <td> 700 </td> <td> 1.220 </td> <td> a </td> </tr> <t> <td> <span id = "bfn_la_c.usa"> 7.05 </td> 4 </td> 4 7.05 < <td> 3,000 </td> <td> bing </td> </td> <td> <td> <span id = "bfn_la_jpm.usa"> 30.62 </td> <td> 30 </td> <td> <td> </td> </td> </td> id = "bfn_la_axp.usa"> 22.30 </span> </td> <td> 5 </td> <td> 6 </td> <td> 맹인 </td> </tr> <tt> <td> <span id = "bfn_la_mrk.usa"> 26.31 </td> <td> <td> <td> <td> <td> 5 </td> <td>-</td> </td> </td> </td> <td> <td> <span id = "bfn_la_mrk.usa"> 26.31 </td> <td> 0.6 </td> <td> 5 </td>-</td> <tr> <td> <td> <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, arguments); } tablesort.prototype = {초기화 : 함수 (tableId, clickrow, startrow, endrow, classup, classDown, selectClass) {this.table = document.getElementById (tableID); this.rows = this.table.rows; // 모든 행 this.tags = this.rows [clickrow-1] .cells; // tags td this.up = classup; this.down = 클래스 다운; this.startrow = Startrow; this.selectClass = selectClass; this.endrow = (endrow == 999? this.rows.length : endrow); this.t2arr = this._td2array (); // 모든 영향을받는 tds의 2 차원 배열은 this.setshow (); }, // 태그 스위치 설정 세트 쇼 설정 : function () {var defaultClass = this.tags [0] .className; for (var tag, i = 0; tag = this.tags [i]; i ++) {tag.index = i; addeventListener (태그, '클릭', 바인드 (tag, statu)); } var _this = this; var 턴 = 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) {// (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 aord aord reverse order 또는 order startArray : function (aord, num) {var attsort = this.sortMethod (this.t2arr, aord, num); // 정렬 된 2 차원 어레이를 정렬 방법에 붙여 넣기 위해 정렬 된 2 차원 배열을 붙여 넣기 2 차원 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); }} 반환 ARR; }, // 정렬 된 2 차원 배열 Array2td를 기반으로 해당 행과 열의 내부 html을 출력합니다. 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]; }}}, // 2 차원 배열을 통과하고, 2 차원 배열의 아동 항목의 W 항목에 따라 정렬 한 다음 분류 된 2 차원 배열 SortMethod : function (arr, aord, w) {arr.sort (function (a, b) {x = killhtml (y = k killhtml (b]); x. arr = aord == 0? arr : arr.reverse (); 반환 ARR; }} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- regexp ( '(/s |^)'+className+'(/s | $)'); return 요소 .classname.match (reg); } function addClass (요소, className) {if (! this.hasclass (element, className)) {element.className += "" +className; }} 함수 removeClass (요소, className) {if (hasclass (element, classname)) {var reg = new regexp ( '(/s |^)'+className+'(/s | $)'); 요소 .className = element.className.replace (reg, ''); }} var bind = function (object, fun) {return function () {return fun.apply (개체, 인수); }} // 모든 html 태그를 제거합니다. 함수 killhtml (str) {return str.replace (/<[^>]+>/g, ""); } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ = new Tablesort ( '테이블', 1,2,999, 'up', 'down', 'hov');위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.