快捷導(dǎo)航

HTML 自動伸縮的表格Table js實(shí)現(xiàn)

更新時間：2009年04月01日 23:56:24 作者：

在開發(fā)的過程中，表格Table有個缺陷，如果一行中某個單元格的超過一行，表格就不夠美觀了。

下面的代碼解決了這個問題：當(dāng)表格被載入的時候，TD的寬度是原定的長度，不會撐開TD，也不會影響其他TD，點(diǎn)擊某行會按照本行所有單元格中行數(shù)最多的單元格的長度伸長行高。用戶體驗(yàn)很好。
【優(yōu)點(diǎn)】
1、對開發(fā)人員指定的表格沒有任何影響；
2、使用簡單；
3、被定義的表格樣式可以隨意的定制你的樣式，不對你的樣式構(gòu)成影響；
4、移植性好，擴(kuò)展性好。
【缺點(diǎn)】
目前用IE7測試正常，但不支持FireFox，工作比較忙，沒時間更正，希望網(wǎng)友更正，俺在此謝過。^_^

【使用方法】
1、將AutoTableSize.js包文件[點(diǎn)擊這兒下載源代碼]導(dǎo)入到你的web應(yīng)用目錄中；
2、引入包AutoTableSize.js，頁面body底部加入：
<script type="text/javascript" src="AutoTableSize.js"></script>
3、編寫你的腳本調(diào)用：
new AutoTableSize(); 當(dāng)DOM對象中只有一個Table的時候不用指定Table的ID屬性；
new AutoTableSize(table); table:既可以是表格的ID屬性，也可以是表格對象；
源碼AutoTableSize.js

復(fù)制代碼代碼如下:

/** 
* @ version: 1.0 
* @ author:Xing,Xiudong 
* @ email:    xingxiudong[at]gmail.com 
* @ index:    http://blog.csdn.net/xxd851116 
* @ date:    2009.04.01 愚人節(jié) 
* @ desciption: AutoTableSize 
*/ 
function AutoTableSize(table) { 
    table = table || document.getElementsByTagName("table")[0]; 
    this.table = typeof(table) == "String" ? document.getElementById("table") : table; 
    this.init(); 
} 

AutoTableSize.prototype.init = function() { 
    autoTableSize = this; 
    var lastClickRowIndex; 
    var clickCount = 0; 
    for (var i = 0; i < this.table.rows.length; i++) { 
        var maxRowHeight = 0; 
        var tds = this.table.rows[i].cells;         
        if (tds.length == 0) continue; 
        for (var j = 0; j < tds.length; j++) {             
            maxRowHeight = maxRowHeight > tds[j].offsetHeight ? maxRowHeight : tds[j].offsetHeight;     
            var innerDiv = document.createElement("div"); 
            innerDiv.style.height = Number(this.table.style.fontSize.substring(0, this.table.style.fontSize.length - 2)) + 1 + "px";             
            innerDiv.style.overflow = "hidden"; 
            innerDiv.style.margin = "0"; 
            innerDiv.style.padding = "0"; 
            innerDiv.style.border = "0"; 
            innerDiv.innerHTML = tds[j].innerHTML; 

            tds[j].innerHTML = ""; 
            tds[j].appendChild(innerDiv); 
        }         
        this.table.rows[i].maxHeight = maxRowHeight;         
        this.table.rows[i].onmouseover = function(){this.style.backgroundColor = "#DAE9FE";}     
        this.table.rows[i].onmouseout = function() {this.style.backgroundColor = "#FFF";} 
        this.table.rows[i].onclick = function() {     
            if (this.rowIndex == lastClickRowIndex) {     
                if (clickCount % 2 == 0) { 
                    autoTableSize.showTR(this.rowIndex); 
                } else { 
                    autoTableSize.hideTR(this.rowIndex); 
                } 
                clickCount++; 
                return; 
            } 
            autoTableSize.hideTR(lastClickRowIndex); 
            autoTableSize.showTR(this.rowIndex); 
            lastClickRowIndex = this.rowIndex; 
            clickCount++; 
        } 
    } 
} 
AutoTableSize.prototype.hideTR = function(index) { 
    if (!Number(index)) return; 
    tds = this.table.rows[index].cells;     
    for (var i = 0; i < tds.length; i++) { 
        tds[i].firstChild.style.height = Number(this.table.style.fontSize.substring(0, this.table.style.fontSize.length - 2)) + 1 + "px"; 
    } 
} 
AutoTableSize.prototype.showTR = function(index) { 
    if (!Number(index)) return; 
    tds = this.table.rows[index].cells;     
    for (var i = 0; i < tds.length; i++) { 
        tds[i].firstChild.style.height = this.table.rows[index].maxHeight - 2 * this.table.getAttribute("cellpadding"); 
    } 
}