HTML中构建自动伸缩的表格Table

文章原创，转载请说明文章来自：http://blog.youkuaiyun.com/xxd851116/archive/2009/04/01/4041616.aspx

【引子】在开发的过程中，表格Table有个缺陷，如果一行中某个单元格的超过一行，表格就不够美观了。下面的代码解决了这个问题：当表格被载入的时候，TD的宽度是原定的长

度，不会撑开TD，也不会影响其他TD，点击某行会按照本行所有单元格中行数最多的单元格的长度伸长行高。用户体验很好。

【优点】
1、对开发人员指定的表格没有任何影响；
2、使用简单；
3、被定义的表格样式可以随意的定制你的样式，不对你的样式构成影响；
4、移植性好，扩展性好。
【缺点】
目前用IE7测试正常，但不支持FireFox，工作比较忙，没时间更正，希望网友更正，俺在此谢过。^_^

【使用方法】
1、将AutoTableSize.js包文件[点击这儿下载源代码]导入到你的web应用目录中；
2、引入包AutoTableSize.js，页面body底部加入：
<script type="text/javascript" src="AutoTableSize.js"></script>
3、编写你的脚本调用：
new AutoTableSize();   当DOM对象中只有一个Table的时候不用指定Table的ID属性；
new AutoTableSize(table); table:既可以是表格的ID属性，也可以是表格对象；

【下载源码】 点击下载

【源码AutoTableSize-v1.0.js】

/** * @ version: 1.0 * @ author:Xing,Xiudong * @ email: xingxiudong[at]gmail.com * @ index: http://blog.youkuaiyun.com/xxd851116 * @ date: 2009.04.01 愚人节 * @ 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"); } }