通過欄（column）來對表格進行分類
表格可以包含很多的資訊，但是只有你正確的理解了它們才可以。通過不同的column來對表格進行分類可以讓用戶以一種可行的方式來查看資料，並且進一步的去瞭解。
解決方法
開始，我們將使用一個語法上有意義的HTML表格，這會給我們提供我們需要插入事件監聽器、插入額外元素以及對我們的資料進行分類所需要的結構：
我們需要在每個表格的標題欄中創建事件監聽器，幫助我們監聽我們的column並且對被點擊的column進行分類：
IE 5處理動態產生的表格內容會有麻煩，所以我們需要專門的將它排除。
只有那些class為sortableTable的表格會被轉化成可分分類的表格，所以，initSortableTable引導DOM尋找這些表格中的表頭，一旦它們找到了，每個表格單位的內容就會用超連結打包——這就讓使用鍵盤的用戶選擇一個欄（column）去對表格進行分類——這些鏈結中會放入事件監聽器來觀察點擊事件的發生，並且執行sortColumn。每個鏈結的title屬性也會被設置，給用戶提供他們希望點擊發生時可以提供的資訊。
SortColumn功能非常的長，因為每次一個表格單元被點擊的時候它必須指導並重新組織整個的表格：
第一個for迴圈在所有的結構變數被定義之後發生，在表頭被點擊之後它會分別確定每個表頭的狀態。不僅僅class會被用來識別表頭（heading cell），而且一個專門的sortOrder屬性會用來按照降冪進行排序，但是如果一個表頭連續被點擊了兩次，分類順序就會改變，變成昇冪。每個表頭都會記住它最近最長顯示的分類順序狀態，而且當表頭被重新選定之後column會返回到那個狀態。一個被點擊的表頭的超連結title也會根據目前的分類順序重新書寫。
第二個for迴圈對每行進行分類，原始tbody的拷貝回被創建用來存儲記錄的表格行，最開始的時候，這個拷貝會是空的。隨著原來tbody中每行被掃描過後，我們進行分類的column中表格內容會與已經存在於copy中的行內容進行比較。
為了找到表格的內容，我們可以使用getInternalText：
getInternalText提取一個元素中所有的文本——包括所有的子元素——它就是通過遞迴調用自己對每個子元素進行檢查並且將相關的值連接在一起。這就讓我們可以瞭解一個表格中的文本內容，無論這個表格包含什麼元素，比如spans、strongs或者ems。任何完全空白的文本節點（空格/spaces，tabs或者新的行/new lines）都會通過常規的檢查而忽略。
當sortColumn在考本中找到一行比我們掃描的表格內容少，我們就會在複製的tbody中插入一個掃描行的拷貝。對於降冪排列的欄，我們會簡單的將它發過來進行比較：拷貝中行的值必須比我們掃描的行中的值要大。
在進行比較值錢，我們會檢查分類表格中的內容是否可以作為整數進行表達，如果可以，比較的值就會被轉換。這就讓包含數位的欄進行合適的分類，字串比較會比數位比較產生更多的差異。
一旦我們原始的行都被拷貝到了新的tbody中，並且元素也被用來替換之前的元素，我們就有了我們的分類表格了！
使用sortDescending和sortableAscending，我們可以使用CSS通知用戶表格是基於哪欄進行分類的，以及如何分類的，如圖13.2和13.3所示。
總結
DHTML的兩個特點就是捕捉事件，並且通過DOM重新組織及創建網頁元素。通過這些原則，我們可以捕捉用戶與網頁互動的很多內容並且根據用戶的行為進行很好的回應。
通過JavaScript增強網頁應用的數量和品質，DHTML的特徵可以被提升到一個新的曾名，代表著創新JavaScript的一個最快增長領域。本章中講解的基礎例子都會讓你感受到它在用戶流覽器中所表現出來的強大的力量。我們將在以後的內容中做進一步的說明。
推薦給同仁
您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com
