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 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
vue如何判断dom的class
Apr 26 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 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/04/09 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
laravel入门知识点整理
2020/09/15 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
js中的string.format函数代码
2020/08/11 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
Vue动态组件实例解析
2017/08/20 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python切片用法实例教程
2014/09/08 Python
Python pickle模块用法实例分析
2015/05/27 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
手机促销活动方案
2014/02/05 职场文书
青春寄语大全
2014/04/09 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS