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


Posted in Javascript onApril 01, 2009

下面的代码解决了这个问题:当表格被载入的时候,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"); 
    } 
}
Javascript 相关文章推荐
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
Boostrap入门准备之border box
May 09 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 #Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 #Javascript
setTimeout 不断吐食CPU的问题分析
Apr 01 #Javascript
js Flash插入函数免激活代码
Mar 31 #Javascript
响应鼠标变换表格背景或者颜色的代码
Mar 30 #Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 #Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 #Javascript
You might like
php字符串截取问题
2006/11/28 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
常用PHP框架功能对照表
2014/10/23 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
document.write的几点使用心得
2014/05/14 Javascript
js实现简单的验证码
2015/12/25 Javascript
详解Document.Cookie
2015/12/25 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
python求众数问题实例
2014/09/26 Python
python 连接sqlite及简单操作
2017/06/30 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
python如何快速拼接字符串
2020/10/28 Python
30年同学聚会邀请函
2014/01/25 职场文书
监察建议书格式
2014/05/19 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis
python 详解turtle画爱心代码
2022/02/15 Python