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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
浅谈javascript 面向对象编程
Oct 28 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 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 explode()函数用法、切分字符串
2012/10/03 PHP
php数据库备份还原类分享
2014/03/20 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
Python 私有函数的实例详解
2017/09/11 Python
对numpy中shape的深入理解
2018/06/15 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python and or用法详解
2019/06/26 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
python制作微博图片爬取工具
2021/01/16 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
竞争与合作演讲稿
2014/05/12 职场文书
广播体操口号
2014/06/18 职场文书
个人年终总结范文
2015/03/09 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
MyBatis 动态SQL全面详解
2021/10/05 MySQL