HTML 자동 확장 테이블 jsimplementation_javascript 기술-JS 튜토리얼-php.cn

HTML 자동 확장 테이블 jsimplementation_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:54:40

원래의

1363명이 탐색했습니다.

다음 코드는 이 문제를 해결합니다. 테이블이 로드될 때 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"); 
    } 
}