HTML automatic scaling table js implementation_javascript skills-JS Tutorial-php.cn

HTML automatic scaling table js implementation_javascript skills

WBOY

Release： 2016-05-16 18:54:40

Original

1363 people have browsed it

The following code solves this problem: when the table is loaded, the width of the TD is the original length, which will not stretch the TD and will not affect other TDs. Clicking on a row will follow the number of rows in all cells of this row. The length of the cells extends up to the row height. The user experience is great.
【Advantages】
1. No impact on the tables specified by developers;
2. Easy to use;
3. The defined table styles can be customized at will The style will not affect your style;
4. Good portability and scalability.
[Disadvantages]
Currently, the test is normal with IE7, but FireFox is not supported. I am very busy at work and have no time to correct it. I hope netizens can correct it. I would like to thank you. ^_^

[How to use]
1. Import the AutoTableSize.js package file [click here to download the source code] into your web application directory;
2 , introduce the package AutoTableSize.js, and add at the bottom of the page body:

3. Write your script call:
new AutoTableSize(); When there is only one Table in the DOM object, there is no need to specify the ID attribute of the Table;
new AutoTableSize(table); table: It can be either the ID attribute of the table or the table object;
Source code AutoTableSize.js

Copy code The code is as follows:

/**
* @ 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"); 
    } 
}