HTML自動スケーリングテーブルjs実装_javascriptスキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:54:40

オリジナル

1361 人が閲覧しました

次のコードは、この問題を解決します。テーブルがロードされるとき、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("セルパディング"); 
 } 
}