為Web頁中的Table對象建立一個映射表

    HTML對象中的TABLE是我們常用的網頁元素，在DHTML編程中，我們可以通過它的rows和cells方法方便的訪問表格對象裡面的每一個儲存格，而且表格對象(table)的每個單元行(tr)和每個儲存格(td)分別又有自己的rowIndex和cellIndex屬性。

    使用上面提到的表格對象特性，當我們要在表格的橫向或縱向瀏覽儲存格的時候，似乎可以非常的簡單，比如縱向瀏覽一個column裡的儲存格，我們只用：

<script language="javascript">
function BrowerColumn(tbl, col)
{
    for ( var i=0 ; i < tbl.rows.length ; ++i )
    {
        var cell = tbl.rows(i).cells(col);
        // do something with cell
    }  
}
</script>

就可以了，如果是橫向瀏覽更加簡單，只需要使用td的nextSibling和previousSibling屬性就行了。

    說了半天，似乎還沒有說到給TABLE建立什麼映射的事情哦，上面說到的表格儲存格瀏覽的情況確實是可行的，可是它卻只能解決規則的表格對象，什麼是規則的表格對象呢？就是說表格的每個儲存格的colSpan和rowSpan必須都分別相同，當然預設的都是1了，否這縱向瀏覽將會crash。

    我們知道表格裡面合併儲存格的方法是使用xxxSpan，然後在合并方向上的cell會根據合并的寬度被移去xxxSpan-1(xxxSpan>1)個。這都是我們清楚的(如果你不清楚，說明這篇文章不適合你閱讀)，可是在行上合并了以後，cell的cellIndex的值仍然是連續的，這就出問題了，像下面的這個表格儲存格的每個cell的cellIndex居然成了這些值@_@：

   

    我們如果再使用文章開始那段代碼去縱向瀏覽這個表格的儲存格，那麼將會死的很難看。於是我們可以先給表格建立一個cell到colCount*rowCount這樣一個矩陣的映射，然後我們在那個二維矩陣中去瀏覽儲存格就會非常簡單，不管是縱向還是橫向(不過橫向瀏覽仍然建議使用xxxSibling屬性)。建立的矩陣效果

     
    這樣我們就可以在這個tableMap上方便的縱向瀏覽了。

    我們為什麼要縱橫瀏覽表格的儲存格呀？？當我們在做一些表格中的highlighting的時候，這是經常需要使用的方法，當然這個表格的縱橫瀏覽還是我下面要說的'使用方向鍵在輸入框矩陣中自然的導航'的基礎。

    附表格儲存格映射矩陣代碼：

<script language="javascript">
function CreateTableMapping(tbl)
{
    if ( !tbl.rowCount )
    {
        var tableMap = [];
        var colCount = 0;
        for ( var i=0 ; i < tbl.rows(0).cells.length ; ++i )
        {
            colCount += tbl.rows(0).cells(i).colSpan;
        }
        tbl.colCount = colCount;
        tbl.rowCount = tbl.rows.length;
        for ( var i=0 ; i < tbl.rows.length ; ++i )
        {
            var ary = new Array(colCount);
            for ( var j=0 ; j < colCount ; ++j )
            {
                ary[j] = true;
            }
            tableMap.push(ary);
        }
        for ( var i=0 ; i < tbl.rowCount ; ++i )
        {
            var cellIndex = 0;
            for ( var j=0 ; j < colCount ; j += currentCell.colSpan )
            {
                if ( tableMap[i][j] )
                {
                    var currentCell = tbl.rows(i).cells(cellIndex++);
                    for ( var m=i ; m < i+currentCell.rowSpan ; ++m )
                    {
                        for ( var n=j ; n < j+currentCell.colSpan ; ++n )
                        {
                            tableMap[m][n] = false;
                        }
                    }
                    tableMap[i][j] = currentCell; 
                 }
            }
        }
        tbl.tableMap = tableMap;
    }
}
</script>