当前位置: 首页 > 图文教程 > 网络编程 > Javascript > HTML 自动伸缩的表格Table js实现

Javascript
页面中body onload 和 window.onload 冲突的问题的解决
OnFocus与OnBlur的例子区别
javascript cloneNode()方法的使用
Javascript 文件夹选择框的两种解决方案
JQuery 风格的HTML文本转义
javascript 验证码生成代码 推荐学习
javascript new 需不需要继续使用
javascript 操作文件 实现方法小结
JavaScript 注册表访问实现代码
javascript web页面刷新的方法收集
Javascript 遍历对象中的子对象
javascript 具名函数的四种调用方式 推荐
javascript 写类方式之一
javascript 写类方式之二
javascript 写类方式之三
javascript 写类方式之四
javascript 写类方式之五
javascript 写类方式之六
javascript 写类方式之七
javascript 写类方式之八

Javascript 中的 HTML 自动伸缩的表格Table js实现


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 399 ::
收藏到网摘: n/a

在开发的过程中,表格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.js
复制代码 代码如下:

/**
* @ version: 1.0
* @ author:Xing,Xiudong
* @ email: xingxiudong[at]gmail.com
* @ index: http://blog.csdn.net/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");
}
}