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

鉴于从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()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

注意:要提供一个dividtableid 


2.非JQuery方案(纯js)

2.1 思路

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

2.2 添加js函数

添加LockTableHead()函数。

1
2
3
4
5
6
7
8
9
10
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>

注意:要提供一个dividtableid 

 

3.总结

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

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

 

posted @   每天进步多一点  阅读(364)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示