首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

固定表格行列(expression)在IE下适用

Posted in Javascript onJuly 25, 2013

这是一种在IE下适用的固定行列的方法.其具体代码如下: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title> New Document </title> 
<style> 
.FixedTitleRow 
{ 
position: relative; 
top: expression(this.offsetParent.scrollTop); 
z-index: 10; 
width: 80px; 
background-color: #FFCC00; 
} 
.FixedDataColumn 
{ position: relative; 
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft); 
background-color: #E6ECF0; 
} 
.FixedColumnAndRows{ 
position: relative; 
top: expression(this.offsetParent.scrollTop); 
left: expression(this.offsetParent.scrollLeft); 
z-index: 20; 
width: 80px; 
background-color: #FFCC00; 
} 
td{word-break : keep-all;} 
</style> 
</head> 
<body> 
<div id="scrollDiv" style="width:500; height:150; overflow: auto; cursor: default; display: inline; position: absolute;"> 
<table width="100%" cellpadding='0' cellspacing='0' bordercolor='lightgrey' border="1" style="table-layout:fixed"> 
<tr bgcolor="#FFCC00" style="font-size:12px; text-align:center; font-weight:bold;height:25px;"> 
<td class="FixedColumnAndRows">header</td> 
<td class="FixedColumnAndRows">header</td> 
<td class="FixedColumnAndRows">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
<td class="FixedTitleRow">header</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
<tr style="font-size:12px; text-align:center;height:20px;"> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td class="FixedDataColumn">left</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
<td>--</td> 
</tr> 
</table> 
</body> 
</html> 
/* 这种固定行列的方式只适用于IE,并且只适用于数据量较少的情况.数据量很多时是非常耗资源的!*/

固定表格行列(expression)在IE下适用

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jquery实现的移入页面上空文本框时，让它变为焦点，移出清除焦点
Jul 26 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 #Javascript
不使用浏览器运行javascript代码的方法
Jul 24 #Javascript
js展开闭合效果演示代码
Jul 24 #Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 #Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 #Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 #Javascript
javascript中比较字符串是否相等的方法
Jul 23 #Javascript
静态压缩(1) 自动播放(1) Coroutine(1) 分区(2) 信息校验(1) gevent(1) 正则表达式(3) 驱动模型(1) Excel(4) greenlet(1)
You might like
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
索尼ICF-SW100收音机评测
2021/03/02 无线电
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
详解python做UI界面的方法
2019/02/27 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
python datetime中strptime用法详解
2019/08/29 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
Scholastic父母商店：儿童书籍
2017/01/01 全球购物
SKECHERS斯凯奇中国官网：来自美国的运动休闲品牌
2018/11/14 全球购物
村委会换届选举方案
2014/05/03 职场文书
出国留学单位推荐信
2015/03/26 职场文书
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android