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 相关文章推荐
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
利用javaScript处理常用事件详解
Apr 14 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP生成唯一订单号
2015/07/05 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
Vue.js用法详解
2017/11/13 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
pyv8学习python和javascript变量进行交互
2013/12/04 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
StubHub德国:购买和出售门票
2017/09/06 全球购物
如何使用PHP session
2015/04/21 面试题
JAVA程序员面试题
2012/10/03 面试题
社会实践先进工作者事迹材料
2014/05/06 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
情况说明书怎么写
2015/10/08 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书