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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 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整合七牛实现上传文件
2015/07/03 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
Javascript实现的分页函数
2007/02/07 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
php与js的区别是什么
2013/08/05 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
Python实现的密码强度检测器示例
2017/08/23 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python文件操作函数用法实例详解
2019/12/24 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
个人贷款承诺书
2014/03/28 职场文书
健康状况证明书
2014/11/26 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
房贷工资证明范本
2015/06/12 职场文书
父亲去世追悼词
2015/06/23 职场文书
小学数学教师研修日志
2015/11/13 职场文书