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

2024-05-06 14:15:49

字體：大中小

供稿：網(wǎng)友

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

【使用方法】
1、將AutoTableSize.js包文件[點擊這兒下載源代碼]導(dǎo)入到你的web應(yīng)用目錄中；
2、引入包AutoTableSize.js，頁面body底部加入：
<script type="text/javascript" src="AutoTableSize.js"></script>
3、編寫你的腳本調(diào)用：
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 愚人節(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";

上一篇：Javascript 生成無限下拉列表實現(xiàn)代碼

下一篇：js onpropertychange輸入框事件獲取屬性