تشترك هذه المقالة في تطبيق JavaScript لوظيفة فرز جدول HTML للرجوع إليها. المحتوى المحدد كما يلي
رمز HTML :
<table cellpadding = "0" id = "table"> <tr> <td> انقر فوق لي </td> <td> انقر فوق لي </td> id = "bfn_la_bac.usa"> 15.43 </span> </td> <td> 700 </td> <td> 1.220 </td> <td> a </td> </td> <td> <td> <td id = "bfn_la_c.usa" <td> 3،000 </td> <td> bing </td> </tr> <tr> <td> <span id = "bfn_la_jpm.usa"> 30.62 </sd> </td> </td> 30 </td> <td> 2،558،800 </td> id = "bfn_la_axp.usa"> 22.30 </span> </td> <td> 5 </td> <td> 6 </td> <td> أعمى </td> </td> <td> <td> <span id = "bfn_la_mrk.usa <td> 5 </td> <td>-</td> </tr> <tr> <td> <span id = "bfn_la_la_mrk.usa"> 26.31 </sd> </td> <td> 0.6 </td> id = "bfn_la_pg.usa"> 63.16 </span> </td> <td> 7 </td> <td> 4 </td> <td> sub </td> </tr> </tabl>
رمز Javascipt :
var tableSort = function () {this.initialize.apply (هذا ، الوسائط) ؛ } tableort.prototype = {initialize: 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 ؛ // tags 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 Setshow Setshow: function () {var defaultClass = this.tags [0] .ClassName ؛ لـ (var tag ، i = 0 ؛ tag = this.tags [i] ؛ i ++) {tag.index = i ؛ AddEventListener (TAG ، "Click" ، bind (tag ، Statu)) ؛ } var _ this = this ؛ var turn = 0 ؛ دالة 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 ؛ } آخر {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 ++) { removeClass (this.rows [i] .cells [n] ، cla) ؛ } addClass (this.rows [i] .cells [num] ، cla) ؛ }} ، // ابدأ فرز NUM وفقًا للعمود AORD ORDER ORDER ORDERRAY: function (aord ، num) {var efresort = this.sortmethod (this.t2arr ، aord ، num) ؛ arry_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 ثنائي الأبعاد المرتبة: الدالة (num ، arr) {this.colclassset (num ، this.selectClass) ؛ لـ (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 في العناصر الفرعية للمصفوفة ثنائية الأبعاد ، ثم إعادة مجموعة Array Sortmethod ثنائية الأبعاد المصنفة (ARR ، AORD ، W) X.Replace (/، '') ؛ arr = aord == 0؟ arr: arr.reverse () ؛ إرجاع arr ؛ }} /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- regexp ('(/s |^)'+className+'(/s | $)') ؛ return element.className.Match (Reg) ؛ } وظيفة addClass (العنصر ، className) {if (! this.hasClass (element ، className)) {element.className += " +className ؛ }} دالة removeClass (العنصر ، 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 ، mations) ؛ }} // قم بإزالة جميع علامات html وظيفة KillHtml (str) {return str.replace (/<[^>]+>/g ، "") ؛ }. TableSort ('table' ، 1،2،999 ، 'Up' ، 'Down' ، 'Hov') ؛ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.