|
鉴于从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自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2021-4-21 09:18:34