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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JS sort排序详细使用方法示例解析
Sep 27 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
iView框架问题整理小结
2018/10/16 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
python常见的格式化输出小结
2016/12/15 Python
用Python解决x的n次方问题
2019/02/08 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
深入解析神经网络从原理到实现
2019/07/26 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
英国最大的海报商店:GB Posters
2018/03/20 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
安全生产检讨书
2014/01/21 职场文书
服务理念口号
2014/06/11 职场文书
自我检讨书范文
2015/01/28 职场文书
python中super()函数的理解与基本使用
2021/08/30 Python