HTML auto-scaling table JS implementation

The following Code Solved this problem: when the table is loaded, the width of the TD is the original length. It does not support TD or affect other TD, click a row to stretch the row height based on the length of the cells with the largest number of rows in all cells of the row. Good user experience.
[Advantages]
1. The table specified by the developer is not affected;
2. Easy to use;
3. Custom table styles can be customized without affecting your styles;
4. Good portability and scalability.
[Disadvantages]
Currently, IE7 testing is normal, but Firefox is not supported. I am busy working and have no time to correct it. I hope you can correct it. Thank you. Pai_^

[usage]
1. Set autotablesize. for the JS package file, [click here to download Source Code ] and import it to your web application directory.
2. Import the package autotablesize. JS. Add the following content to the bottom of the page body:

3. compile your script call:
New autotablesize (); when there is only one table in the DOM object, you do not need to specify the ID attribute of the table;
New autotablesize (table); table: can be the ID attribute of the table, it can also be a 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 Fool's Day
* @ 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 ");
}
}