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 相关文章推荐
jquery中:input和input的区别分析
Jul 13 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
一分钟理解js闭包
May 04 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
JS中Array数组学习总结
Jan 18 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
Nest.js散列与加密实例详解
Feb 24 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开发负载均衡指南
2010/07/17 PHP
openPNE常用方法分享
2011/11/29 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
php计算税后工资的方法
2015/07/28 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
python 切片和range()用法说明
2013/03/24 Python
Python创建日历实例
2014/08/21 Python
python九九乘法表的实例
2017/09/26 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
详解python中的数据类型和控制流
2019/08/08 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
Python调用.NET库的方法步骤
2019/12/27 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
计算机专业学生求职信分享
2013/12/15 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
打架检讨书500字
2014/01/29 职场文书
外贸业务员求职信
2014/06/16 职场文书
2014年食堂工作总结
2014/11/20 职场文书
2015暑假假期总结
2015/07/13 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL