JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-4-21 09:18:34

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

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

});

}

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.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了。

推荐参考资料：
http://www.mycafei.com/a/study/2012/0909/2.html

关于IE, 下面的方案不支持IE6, IE7, IE8，只支持IE9, IE10。
因为从IE9开始才支持css3的部分功能，所以，IE6, IE7, IE8就不能用此方案了, 其实IE6, IE7 还用css的expressions不挺好吗？多省事，就一句话的事。

4.附录完整的代码
    <HTML>
      <HEAD>
        <TITLE >fff</TITLE>
        <META http-equiv="X-UA-Compatible" content="IE=9" />
            <script type="text/javascript">
                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.style["-ms-transform"] = t1;
                        }
                    };
                }
    </script>
    </HEAD>
    <body onload="LockTableHead('body','your_table')">
    <form>
    <div id="body" style="border-right: 1px groove; border-top: 1px groove; left: 60px;
        overflow: auto; border-left: 1px groove; width: 374px; border-bottom: 1px groove;
        position: absolute; top: 159px; height: 308px">
        <div style="overflow: visible; width: 370px; position: static; height: 308px">
            <table id="your_table">
                <thead id="hid" style="background-color: white">
                    <tr id="tid">
                        <th style="width: 100px">
                            col1
                        </th>
                        <th style="width: 100px">
                            col2
                        </th>
                        <th style="width: 100px">
                            col3
                        </th>
                        <th style="width: 100px">
                            col4
                        </th>
                        <th style="width: 100px">
                            col5
                        </th>
                        <th style="width: 100px">
                            col6
                        </th>
                        <th style="width: 100px">
                            col7
                        </th>
                        <th style="width: 100px">
                            col8
                        </th>
                        <th style="width: 100px">
                            col9
                        </th>
                        <th style="width: 100px">
                            col10
                        </th>
                        <th style="width: 100px">
                            col11
                        </th>
                        <th style="width: 100px">
                            col12
                        </th>
                    </tr>
                </thead>
                <tbody style="display: block; overflow: auto">
                    <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
<tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                     <tr>
                        <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                         <td>
                            milk
                        </td>
                        <td>
                            1 quart
                        </td>
                        <td>
                            2 quart
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

IE6-IE9兼容性问题列表及解决办法_补充之六：锁表头的JQuery方案和非JQuery方案。(不支持IE6,7,8)

1.3 修改页面，调用js