บทความนี้แบ่งปันการใช้งาน JavaScript ของฟังก์ชั่นการเรียงลำดับตาราง HTML สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
รหัส HTML :
<table cellpadding = "0" id = "ตาราง"> <tr> <td> คลิกฉัน </td> <td> คลิกฉัน </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> <td> <td> <pan id = "bfn_la_c.usa" <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> id = "bfn_la_axp.usa"> 22.30 </span> </td> <td> 5 </td> <td> 6 </td> <td> คนตาบอด </td> </tr> <td> <td> <span = "bfn_la_mrk.usa" <td> 5 </td> <td>-</td> </tr> <tr> <td> <span id = "bfn_la_mrk.usa"> 26.31 </span> </td> <td> </td> <td> 5 </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 (นี้, อาร์กิวเมนต์); } tablesort.prototype = {เริ่มต้น: 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 (); }, // ตั้งค่าแท็กสวิตช์ setshow: function () {var defaultclass = this.tags [0] .className; สำหรับ (var tag, i = 0; tag = this.tags [i]; i ++) {tag.index = i; addeventListener (แท็ก, 'คลิก', bind (tag, statu)); } var _this = this; var turn = 0; ฟังก์ชั่น statu () {สำหรับ (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: ฟังก์ชั่น (num, cla) {// รับ td ที่เกี่ยวข้องสำหรับ (var i = (this.startrow-1); i <(this.endrow); i ++) {สำหรับ (var n = 0; n <this.rows [i] RemoveClass (this.rows [i] .cells [n], cla); } addClass (this.rows [i] .cells [num], cla); }}, // เริ่มเรียงลำดับตามลำดับคอลัมน์ ord reverse ลำดับหรือคำสั่ง startArray: ฟังก์ชั่น (aord, num) {var aftersort = this.sortmethod (this.t2arr, aord, num); array_td2array สองมิติ: function () {var arr = []; สำหรับ (var i = (this.startrow-1), l = 0; i <(this.endrow); i ++, l ++) {arr [l] = []; สำหรับ (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); สำหรับ (var i = (this.startrow-1), l = 0; i <(this.endrow); i ++, l ++) {สำหรับ (var n = 0; n <this.tags.length; n ++) {this.rows [i] .cells [n] .innerhtml = arr [l] [n]; }}}, // ผ่านอาร์เรย์สองมิติเรียงลำดับตามรายการ W ในรายการเด็กของอาร์เรย์สองมิติจากนั้นส่งคืนอาร์เรย์สองมิติที่เรียงลำดับ: ฟังก์ชั่น (arr, a ord, w) {arr.sort (ฟังก์ชั่น (a, b) {x = killhtml x.replace (/,/g, ''); arr = aord == 0? arr: arr.reverse (); กลับ arr; - - - regexp ('(/s |^)'+classname+'(/s | $)'); return element.classname.match (reg); } ฟังก์ชั่น addClass (Element, className) {if (! thin.hasclass (องค์ประกอบ, className)) {element.className += "" +className; }} function RemoveClass (Element, className) {if (hasclass (องค์ประกอบ, className)) {var reg = ใหม่ regexp ('(/s |^)'+className+'(/s | $)'); element.className = element.className.replace (reg, ''); }} var bind = function (วัตถุ, fun) {return function () {return fun.apply (วัตถุ, อาร์กิวเมนต์); }} // ลบฟังก์ชั่นแท็ก HTML ทั้งหมด killhtml (str) {return str.replace (/<[^>]+>/g, ""); } // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Tablesort ('Table', 1,2,999, 'Up', 'Down', 'Hov');ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น