鉴于从IE8开始,IE不再支持css的expression了,所以以前依靠它完成锁表头的代码就全部失效了,面对新的浏览器,一切又要重新来过了。

现在所能找到的对于锁表头的方案主要有两种路子:一种是使用JQuery,另一种是使用纯js的,因各个公司情况不一样,各取所需吧!

而这两条路中每一条又带有多种实现思路,先仅举两个思路如下:

1.另外拷贝一份table的head,然后将它安置在table的最上面,这样改动量较大。
2.不拷贝head, 想法把table的head固定在最上面,这样改动量小些。

下面介绍的两个方案:JQuery方案和非JQuery方案(纯js),都是基于思路2的,即不拷贝head, 直接把table的head固定在最上面。

1.JQuery方案

1.1 页面引入jquery.js库
<script src="jquery-1.7.1.js" type="text/javascript"></script>

1.2  添加两个js函数

添加LockTableHead()和translate()函数。

注意:为防止JQuery与现有js框架抢夺$标识符,要执行jQuery.noConflict()

<script type="text/javascript">
function LockTableHead(divId, tableId) {
var jq = jQuery.noConflict();
jq("#" + divId).scroll(function () {
var delta = jq("#" + divId).scrollTop();
if (delta > 0) {
translate(jq("#" + tableId + " th"), 0, delta - 2);
}
else {
translate(jq("#" + tableId + " th"), 0, 0);
}
});
} function translate(element, x, y) {
var translation = "translate(" + x + "px," + y + "px)"
element.css({
"transform": translation,
"-ms-transform": translation,
"-webkit-transform": translation,
"-o-transform": translation,
"-moz-transform": translation
});
}
</script>

1.3 修改页面,调用js

在适当的地方添加LockTableHead()函数调用即可。

如下:

<button  onclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>

注意:要提供一个div的id和table的id 。

2.非JQuery方案(纯js)

2.1 思路

受JQuery方案的启发,将它翻译回普通js即可。

2.2 添加js函数

添加LockTableHead()函数。

  function LockTableHead(divId, tableId) {
document.getElementById(divId).onscroll = function () {
var delta = document.getElementById(divId).scrollTop;
var t1 = "translate(0px," + delta + "px)";
th_Array = document.getElementById(tableId).getElementsByTagName("th");
for (i = 0; i < th_Array.length; i++) {
th_Array[i].style["-ms-transform"] = t1;
}
};
}

2.3 修改页面,调用js

同上,在适当的地方添加LockTableHead()函数调用即可。

如下:

<button onclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>

注意:要提供一个div的id和table的id 。

3.总结

以上两方案实际上都是使用了css3中的translate函数,这就意味着浏览器得支持这个功能是前提条件。

另外,如果页面上只有一个table,也可以通过getElementsByTagName的方式定位table,并用parentNode的方式定位div,这样就不必传递它们的id了。

IE6-IE9兼容性问题列表及解决办法:锁表头的JQuery方案和非JQuery方案(不支持IE6,7,8)的更多相关文章

  1. IE6-IE11兼容性问题列表及解决办法总结

    相比IE6-IE9那版,主要添加IE10和IE11的新变化. 以下是目录及下载链接: 目录 概述 2 第一章:HTML 3 第一节:IE7-IE8更新 3 1. 如果缺少结束标记的 P 元素后跟 TA ...

  2. IE6-IE9兼容性问题列表及解决办法总结

    IE6-IE9兼容性问题列表及解决办法总结 概述 第一章:HTML. 3 第一节:IE7-IE8更新... 31.如果缺少结束标记的 P 元素后跟 TABLE.FORM.NOFRAMES 或 NOSC ...

  3. IE6-IE11兼容性问题列表及解决办法

    IE6-IE11兼容性问题列表及解决办法总结 相比IE6-IE9那版,主要添加IE10和IE11的新变化. 以下是目录及下载链接: 目录概述 2第一章:HTML 3第一节:IE7-IE8更新 3 1. ...

  4. IE兼容性问题列表及解决办法

    目录 概述 2 第一章:HTML 3 第一节:IE7-IE8更新 31. 如果缺少结束标记的 P 元素后跟 TABLE.FORM.NOFRAMES 或 NOSCRIPT 元素,会自动添加结束标记. 3 ...

  5. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  6. 1.各个浏览器内核?经常遇到的浏览器兼容性有哪些?解决办法?常用的hack技巧?

    IE: trident内核 Firefox(火狐):gecko内核 Safari(苹果):webkit内核 Opera(欧鹏):以前是presto内核,现在是Blink内核 Chrome:Blink ...

  7. IE6 验证码刷新失败显示空白解决办法

    原因:点击a标签看不清?换图片 结果验证码显示的空白! 解决办法:在对应的点击事件最后加上return false 即可解决问题. 下面是HTML源码: <p class="regis ...

  8. Windows server 2008 sp2 X64安装sharepoint2007出现兼容性问题无法安装 解决办法

    当你兴冲冲配置好了AD IIS .Net3.0.安装好了SQL2005,打完了sp3补丁,正准备点击sharepoint2007setup.exe安装的时候. 电脑却莫名奇妙提示了一个无法兼容的错误, ...

  9. 安卓模拟器Android SDK Manager 无法获取SDK列表的解决办法

    1.打开运行Android SDK Manager ,Tool菜单,选择Options,打开设置菜单,勾选“Force https://...sources to be fetched using h ...

随机推荐

  1. vuejs组件交互 - 02 - 事件中心管理组件间的通信

    事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventH ...

  2. NDK编译常用命令及不同版本so编译方法

    工具说明 addr2line 把程序地址转换为文件名和行号.在命令行中给它一个地址和一个可执行文件名,它就会使用这个可执行文件的调试信息指出在给出的地址上是哪个文件以及行号. ar 建立.修改.提取归 ...

  3. python之模块chunk,了解即可

    # -*- coding: utf-8 -*-#python 27#xiaodeng#python之模块chunk# chunk模块专用于读取TIFF格式的文件,打开应当使用二进制模式 #TIFF:标 ...

  4. LevelDB和ForestDB简单性能测试(含代码)

    测试环境简单说明 Windows下测试 硬件环境如下: 处理器:Intel(R) Core(TM) i5-4460 CPU @ 3.20GHz 内 存:8GB 硬 盘:希捷 ST1000DM003 操 ...

  5. 转 解决configure: error: Please reinstall the libcurl distribution

    今天配置一台server的php支持curl的时候, 出现如下报错 checking for cURL in default path... not foundconfigure: error: Pl ...

  6. java动态代理技术

    主要用来做方法的增强.让你能够在不改动源代码的情况下,增强一些方法,在方法运行前后做不论什么你想做的事情(甚至根本不去运行这种方法).由于在InvocationHandler的invoke方法中,你能 ...

  7. git for windows配置SSH key

    0. 前言 之前用过一段时间的git,后来迁移系统导致电脑中的git bash消失了,由于在上家公司版本管理用的svn,所以一直没有重新配置,目前工作中版本管理用的gitLab,后期计划将工作之外的精 ...

  8. 持续集成工具jenkins的使用

    jenkins类似于Hadson,是一款持续集成工具.使用jenkins完成自动化部署的表现为:当开发人员向版本库提交新的代码后,应用服务器上自动部署,用户或测试人员使用的马上就是最新的应用程序.搭建 ...

  9. ios中Pldatabase的用法(3)

    #import "ViewController.h" @interface ViewController () @property(nonatomic,retain)PLSqlit ...

  10. url 中非法字符替换,java 正则替换

    url在传输时不允许的一些字符串,参考自:http://www.ietf.org/rfc/rfc1738.txt 以下字符用java正则替换为"_",一句话搞定: "{& ...