HTML自動スケーリングテーブルjs実装_javascriptスキル

次のコードは、この問題を解決します。テーブルがロードされるとき、TD の幅は元の長さになるため、TD は拡張されず、他の TD には影響しません。行をクリックすると、テーブルのすべてのセルの行数が追跡されます。この行は、セルの長さが行の高さまで伸びます。ユーザーエクスペリエンスは素晴らしいです。
【利点】
1. 開発者が指定したテーブルに影響を与えません。
2. 定義されたテーブルのスタイルを自由にカスタマイズできます。スタイルはスタイルに影響しません。
4. 優れた移植性と拡張性。

[短所]
現在、IE7 では正常に動作していますが、FireFox はサポートされていません。仕事が忙しくて修正する時間がありません。感謝したいと思います。 ^_^

[使用方法]
1. AutoTableSize.js パッケージ ファイル [ここをクリックしてソース コードをダウンロード] を Web アプリケーション ディレクトリにインポートします。 2 、パッケージ AutoTableSize.js を導入し、ページ本文の下部に次のように追加します。スクリプト呼び出しを記述します:
new AutoTableSize(); DOM オブジェクトにテーブルが 1 つしかない場合、テーブルの ID 属性を指定する必要はありません。テーブルまたはテーブル オブジェクトの 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("テーブル") : テーブル;
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 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 "ピクセル";            
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);
}
クリック数 ;
戻る;
}
autoTableSize.hideTR(lastClickRowIndex);
autoTableSize.showTR(this.rowIndex);
lastClickRowIndex = this.rowIndex;
クリック数 ;
}
}
}
AutoTableSize.prototype.hideTR = function(index) {
if (!Number(index)) return;
tds = this.table.rows[index].cells;    
for (var i = 0; i tds[i].firstChild.style.height = Number(this.table.style.fontSize.substring(0, this. table.style.fontSize.length - 2)) 1 "ピクセル";
}
}
AutoTableSize.prototype.showTR = function(index) {
if (!Number(index)) return;
tds = this.table.rows[index].cells;    
for (var i = 0; i tds[i].firstChild.style.height = this.table.rows[index].maxHeight - 2 * this.table .getAttribute("セルパディング");
}
}