JavaScript學習筆記（4）表格排序

   本文所實現的表格排序大致可以分為以下幾個步驟：
    1、取得所有要排序的行，將其引用push到一個數組中
    2、根據要排序的行的情況編寫數組排序時所使用的編寫的比較函數
    3、對包含所有行引用的陣列進行排序
    4、將排序後的陣列依照指定的順序將陣列所引用的行重新寫回DOM

   如果您對使用DOM操作表格還不太熟悉，您可以參考一下《使用DOM編寫瀏覽器兼容的Table操作》,如果您對數組的排序還不太熟悉，可以參考一下《數組排序以及在漢字排序中localeCompare()方法的使用》,因為使用DOM操作表格和陣列排序是表格排序的基礎。
   先看一下我們範例用的程式碼，本文會依照上述的步驟一步一步的分析：
 1             var asc = true;  要排序的行引用的容器
3         function sortTable(){
 4             //取得所有要排序中的行程
 5   6             var oTBody = oTable.tBodies[0];
 7             var allTr = oTBodyody.rows        var allTr = oTBodyody. ;
 8             //將要排序的行放入陣列以排序
 9                  arrayTr.push(allTr[i]);   
11             }12         /若為升序
13             if(asc){
14                   oTable.rows[0].title = "點選降序排列表格";
16                18                 //如果是降序
19                 arrayTr.reverse();
20                 oTable.rows[0].title = "點擊升序排列表格";
21                 asc = true;
22             }
23             //將排過續的行依數序重寫回DOM
24             var oFragment = document.createDocumentFragment();
25                   oFragment.appendChild(arrayTr[j]);
27             }
28             oTBody.appendChild(oFragment)    程式的5--11行實現了我們所說的第一步，這裡有兩個需要說明的地方，一是我們在HTML中使用了和

標籤用於分割表格的標題本分以及要排序的部分，礙於篇幅HTML程式碼不再展示，二是《javaScript高階程式設計》說Table的tBodies屬性是一個JS中的集合，而不是數組，沒有sort()方法，所以不能用來直接排序，關於JS集合的概念還需要我們好好研究啊，不過這不是本文的重點，這裡我們想說明的重點是，tBodies不能拿來直接排序。
程式的13--22行實現了第三步，這裡我們隱藏了第二步的具體實現（在後面的部分會詳細說明）我們認為這樣可以更好的說明我們的思路，而不會讓自己糾纏於具體的方法實現導致對程序沒有一個總體的認識。還要說明的是程式中我們使用了一個全局性的容器來裝載排序行，所以函數執行後，arrayTr總是會包含最後一次排序的行引用順序，這時如果我們想進行倒序的話只需調用reverse( )方法，而不再需要對陣列進行逆向排序。
   程式的24行使用了document.createDocumentFragment()可以得到一個文檔碎片,documentFragment是一個不完整的document物件,主要用於存放暫時沒有加入dom樹的Element。作為js操作dom的快取,十分好用,他會一次性的將改動在DOM中呈現，而不是每次操作DOM都要是客戶端重繪。
   以下觀察用於實現我們第二步驟的函數的特定實作：
 1         /**
 2          * 比較函數
 3          * @param {Object} param1 要比較的行程         * @return {Number} 若param1 > param2 回傳1
 6          *如果param1 == param2 回傳0
 7          *                  */
 9         var param1 = oTr1.cells[0].childNodes[ 0].nodeValue;
11             var param2 = oTr2.cells[0].childNodes[0].nodemValue;
12            if(isNaN(param1) && isNaN(param2) ){
14                 return param1.localeCompare(param2);
15      數字，參數2為字串
17             if(!isNaN(param1) && isNaN(param2)){
18      1;
19             }
20             // (param2)){
22                 return 1;
23          個參數皆為數字
25             if(!isNaN(param1) && !isNaN(param2)){
26     
27                 if(Number(param1) == Number (param2)) return 0;
28                 if(Number(param1)    以上我們說明了單列表格的排序思路及方法，有了這些思路我們可以很容易的擴展我們的程序，實現具有更多功能的表格排序。

以上就是JavaScript學習筆記（4）表格排序的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！