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 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
js快速排序的实现代码
Dec 08 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
Laravel find in set排序实例
2019/10/09 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
python实现简单的计时器功能函数
2015/03/14 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
python selenium操作cookie的实现
2020/03/18 Python
PyQt5实现简单的计算器
2020/05/30 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
如何写好优秀的创业计划书
2014/01/30 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
应届毕业生求职信范文
2015/03/19 职场文书