HTML 自動伸縮的表格Table js實現

2019-11-21 01:25:40

字體：大中小

來源：轉載

供稿：網友

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

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

復制代碼代碼如下:

/** 
* @ version: 1.0 
* @ author:Xing,Xiudong 
* @ email:    xingxiudong[at]gmail.com 
* @ index:    http://blog.csdn.net/xxd851116 
* @ date:    2009.04.01 愚人節 
* @ 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"); 
    } 
}