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拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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
农民和部队如何穿矿
2020/03/04 星际争霸
php函数指定默认值方法的小例子
2013/12/04 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PDO::setAttribute讲解
2019/01/29 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
ionic3 懒加载
2017/08/16 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
开始着手第一个Django项目
2015/07/15 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
IBatis持久层技术
2016/07/18 面试题
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
高中自我鉴定
2013/12/20 职场文书
教师考核材料
2014/05/21 职场文书
平面设计师岗位职责
2014/09/18 职场文书
质量整改报告范文
2014/11/08 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书