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 判断脚本加载完毕的代码
Jul 13 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
Selenium元素的常用操作方法分析
2018/08/10 Python
Python异常处理例题整理
2019/07/07 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
HTML5样式控制示例代码
2013/11/27 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
行政专员工作职责
2013/12/22 职场文书
办公用房租赁协议书
2014/11/29 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python
VUE递归树形实现多级列表
2022/07/15 Vue.js