HTML 자동 확장 테이블 jsimplementation_javascript 기술

다음 코드는 이 문제를 해결합니다. 테이블이 로드될 때 TD의 너비는 원래 길이이므로 TD가 늘어나지 않으며 다른 TD에 영향을 주지 않습니다. 행을 클릭하면 모든 셀의 행 수를 따릅니다. 이 행의 셀 길이는 행 높이까지 확장됩니다. 사용자 경험이 훌륭합니다.
【장점】
1. 개발자가 지정한 테이블에 영향을 주지 않습니다.
2. 정의된 테이블 스타일을 마음대로 설정할 수 있습니다. 스타일은 스타일에 영향을 미치지 않습니다.
4. 좋은 이식성과 확장성.

[단점]
현재 IE7에서는 테스트가 정상인데, FireFox는 지원하지 않습니다. 일이 너무 바빠서 수정할 시간이 없네요. . 감사합니다. ^_^

[사용 방법]
1. AutoTableSize.js 패키지 파일을 웹 애플리케이션 디렉토리로 가져옵니다. [소스 코드를 다운로드하려면 여기를 클릭하세요] 2, AutoTableSize.js 패키지를 소개하고 페이지 본문 하단에 다음을 추가합니다.
. 스크립트 호출을 작성하세요.
new AutoTableSize(); DOM 객체에 테이블이 하나만 있는 경우 테이블의 ID 속성을 지정할 필요가 없습니다.
new AutoTableSize(table); 테이블 또는 테이블 개체의 ID 속성일 수 있습니다.
소스 코드 AutoTableSize.js

코드 복사 코드 다음과 같습니다.

/**
* @ 버전: 1.0
* @ 작성자:Xing,Xiudong
* @ 이메일:    xingxiudong[at]gmail.com
* @ 색인:    http://blog.csdn.net/xxd851116
* @ 날짜:    2009.04.01 愚人节
* @ 설명: AutoTableSize
*/
function AutoTableSize(table) {
    table = table || document.getElementsByTagName("테이블")[0];
    this.table = typeof(table) == "문자열" ? document.getElementById("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) 계속;
        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 = "숨김";
            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 ;
                반품;
            }
            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");
    }
}